Yes the latest React Native tutorials and examples use the new import syntax. https://facebook.github.io/react-native/docs/tutorial.html In terms of the differences between CommonJS (require) and ES6 modules (import), there are some good answers here: Using Node.js require vs. ES6 import/export I think most people prefer the new ES6 syntax. However no JS engines implement ES6 modules currently, … Read more
You can set extraData in FlatList: <FlatList … extraData={this.state} data={this.state.posts} renderItem={this.renderPost} … /> When state.posts or state.posts‘s item change, FlatList will re-render. From FlatList#extradata: A marker property for telling the list to re-render (since it implements PureComponent). If any of your renderItem, Header, Footer, etc. functions depend on anything outside of the data prop, stick … Read more
I think it’s the problem of ‘save write’, I am using Webstorm, uncheck “File->Settings->System Settings->sychronization->use safe write” to see if it helps you.
You can try this; <View style={{flex:1,backgroundColor:’white’}}> <View style={{justifyContent:’space-around’}}> <View style={{height:50,alignSelf:’stretch’,backgroundColor:’pink’,margin:5}}/> <View style={{height:50,alignSelf:’stretch’,backgroundColor:’pink’,marginHorizontal:5}}/> <View style={{height:50,alignSelf:’stretch’,backgroundColor:’pink’,margin:5}}/> </View> <View style={{flex:1,alignItems:’center’,justifyContent:’center’,alignSelf:’stretch’,backgroundColor:’blue’,margin:5}}> <Text style={{color:’white’,fontWeight:’bold’}}> View </Text> </View> </View>
Yes, call cloneWithRows(…) The React Native documentation doesn’t cover the ListViewDataSource object, so it can be helpful to read the comments in the source code to see how this works. Some notes which may be helpful: cloneWithRows(data) is a bit misleadingly named because doesn’t just create a clone of the data as the name suggests. … Read more
You can define a separate js file colors.js, that consists of the colors object and export it. export const COLORS = { white: ‘#fff’, black: ‘#000’, // your colors } Now import COLORS from the above file – import {COLORS} from ‘./<Path>/colors.js’ in your respective file that uses the defined colors. And use it as … Read more
Maybe you want to do something like this: export type RootStackParamList = { Main: undefined; Home: undefined; }; const Stack = createStackNavigator<RootStackParamList>(); export const RootNavigator = () => { return ( <Stack.Navigator initialRouteName=”Main”> <Stack.Screen name=”Main” component={Main} /> <Stack.Screen name=”Home” component={Home} /> </Stack.Navigator> ); }; then in your code to do something like this: type homeScreenProp … Read more
Your logic should follow this: class MyStartingComponent extends React.Component { constructor(){ super(); this.state = {firstLaunch: null}; } componentDidMount(){ AsyncStorage.getItem(“alreadyLaunched”).then(value => { if(value === null){ AsyncStorage.setItem(‘alreadyLaunched’, ‘true’); // No need to wait for `setItem` to finish, although you might want to handle errors this.setState({firstLaunch: true}); } else{ this.setState({firstLaunch: false}); }}) // Add some error handling, also … Read more
Simply pass activeOpactity prop with value 1. <TouchableOpacity activeOpacity={1}>….</TouchableOpacity> Make sure you import TouchableOpacity from “react-native” not from “react-native-gesture-handler”.
This is one way how I solved this issue. I deleted the yarn.lock file & .expo folder and tried running expo upgrade and it worked. I was upgrading from SDK 44 to SDK 45.