Resource Handling in React-Native
I just recently migrated from Android development into the cross-platform framework of React-Native. One thing I missed during that transition was the helpful way in which resources could be retrieved in Android.
If your like me and are hesitant about handling resources in React-Native, this may guide you in an approach I find useful.
Step 1. Assets & RNPM
1. First create a new folders in the root of your project called resources
1. If you have assets, now is the time to add them to the resources folder
Here is an example of my resource folder after adding several assets to it.
3. RNPM it.
RNPM is a node module used to link/add your assets into the native applications ReactNative has generated. However before we call rnpm, we need to first modify our package.json file and tell rnpm where to look.
package.json
After saving the package.json swtich to your cli and type the following command.
Step 2. The Resource Object
- Go back to the root of your project and create a new folder called styles
2. Within the styles directory create a new file called res.js
3. Setting up a Resource Map
In this step we are compiling all the useful things we will need access to while developing into a single Resource Object.
Step 3. (Optional) Wrapping the Resources
1. In the styles folder create another file called wrapper.js
wrapper.js
2. Import our resource object, as well as the StyleSheet object from react-native.
We want to make it easy to create a StyleSheet but still have access to our global resources. So we are going to wrap the StyleSheet create method.
3. Now we want to export our Wrapped Object as well as our Resource so we can use it in new styles.
Step 4. Usage
Here is a quick run-down of how to use the Resource object within styles.
example.js
That’s it, hope it helps you create styles more efficiently and keep a tight lock on what resources are being used within your React-Native app.
