React Native - dennisholee/notes GitHub Wiki
Environment Setup
IDE Setup
- Download Atom
- Install nuclide (Atom -> Preference -> Settings -> install)
Libraries
Expo CLI
npm i -g expo-cli
Expo
Login expo login
Managing constants
In the "app.json" file add constants under expo.extra i.e.:
{
"expo": {
...
"extra" : {
"hsbc" : {
"branch": {
"url": "https://api.hsbc.com/open-banking/v2.2/branches"
}
}
},
},
}
To reference the constant:
import { Constants } from 'expo'
... Constants.manifest.extra.hsbc.branch.url ...
Images
Add image using default size
<Image
style={{flex:1, height: undefined, width: undefined}}
source={require('../../../assets/images/onboarding-how-it-works.png')}
resizeMode="contain"
/>
Turn opaque when image is selected
<TouchableOpacity style={{flex: 1, height: undefined, width: undefined}} onPress={this.onPress} >
<Image
style={{flex: 1, height: undefined, width: undefined}}
source={{ uri: this.props.imgUrl }}
resizeMode="contain" />
</TouchableOpacity>
Install firebase module npm i --save firebase
Useful links
- Google Map: https://medium.com/nycdev/create-a-react-native-app-with-google-map-using-expo-io-68041252023d
- React Forms: https://github.com/asmyk/react-universal-forms-example
- React Native Firebase Authentication: https://medium.com/react-native-training/react-native-firebase-authentication-7652e1d2c8a2
- React and Reduct : https://www.sohamkamani.com/blog/2017/03/31/react-redux-connect-explained/