Using React Native 0.41 (in March 2017), targeting iOS, I just found it as easy as: <Image source={require(‘./myimage.png’)} /> The image file must exist in the same folder as the .js file requiring it for “./” to work. I didn’t have to change anything in the XCode project. It just worked. Note that the path … Read more
You can pass params with the navigate function’s second argument: onPress(user) { this.props.navigation.navigate( ‘DetailPage’, { user }, ); } React Navigation 5.x, 6.x (2022) Access them in this.props.route.params. For example in your DetailsPage: <Text style={styles.myStyle}>{this.props.route.params.user.name}</Text> https://reactnavigation.org/docs/params/ React Navigation <= 4.x Access them in this.props.navigation.state.params. For example in your DetailsPage: <Text style={styles.myStyle}>{this.props.navigation.state.params.user.name}</Text> https://reactnavigation.org/docs/4.x/params/
Set bottom padding to the <FlatList> content container: <FlatList contentContainerStyle={{ paddingBottom: 20 }} />
That’s the ways I fixed it. As @chemitaxis suggests, add base-64 module from NPM: npm i -S base-64 Based on it, I propose a couple of ways to use it: Importing it in files you need it Then, you can import ‘encode’ and ‘decode’ methods using aliases, this way: import {decode as atob, encode as … Read more
Edit Jan 2021: The React Native docs currently recommend React Native WebView: <WebView originWhitelist={[‘*’]} source={{ html: ‘<p>Here I am</p>’ }} /> https://github.com/react-native-webview/react-native-webview If you don’t want to embed a WebView, there are also third party libraries to render HTML into native views: react-native-render-html react-native-htmlview Edit March 2017: the html prop has been deprecated. Use source … Read more
This example will show you back navigation which is expected generally in most of the flows. You will have to add following code to every screen depending on expected behavior. There are 2 cases: 1. If there are more than 1 screen on stack, device back button will show previous screen. 2. If there is … Read more
check out the flexbox doc. in the stylesheet, use: flex:1,
The maxLength prop is now part of React Native: <TextInput value={this.state.text} maxLength={4} />
For remote debugging, Your both devices must be connected to the same wifi ( network ).
Faced the same issue while implementing Navigation. Run following commands npm install @react-navigation/native React Navigation is made up of some core utilities and those are then used by navigators to create the navigation structure in your app. In your project directory, run: npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view This will install versions of these … Read more