Intro :

As a developer i found a lot’s of issues at the time of working in react native, resolve it but i found some of them again and again so i think to list down all and placed it at one place, so let’s start “Some of the common issues in react native part – 1”.

Issue1: How to set a dynamic header in navbar react-native flux.

Solution: in your router set hideNavBar false and then where you want to set the header put the componentDidMount.

in your router –

<Scene key="homeUserConnect" title="Connect" 
component={homeUserConnect} gesturesEnabled={false} hideNavBar={false} />

  put the code in home.js –

componentWillMount() {
 this.props.navigation.setParams({ title: "YOUR_USER_NAME", }); 
}

Issue2: com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives: The number of method references in a .dex file cannot exceed 64K. react native – 1

Solution: Modify the module-level build.gradle file to enable multidex and add the multidex library as a dependency, as shown here

android { 
defaultConfig { 
... minSdkVersion 16 
targetSdkVersion 28 
multiDexEnabled true 
}
} 
dependencies { 
implementation 'com.android.support:multidex:1.0.3' 
}

Issue3:  Scroll view not working react native

Solution:  You should wrap your component in view like this, and provide flex to root view, Wrap that component which you want to scroll inside a scroll view, finally your code will run as you expected. 

<View style={{flex:1}}> <ScrollView>your expected components...</ScrollView> </View>

Issue4: Transparent background with overlay react native

Solution: Put these styles in your style code.

const styles= StyleSheet.create({ 
 overlay:{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, 
 backgroundColor: 'rgba(0,0,0,0.2)' 
});

Put these code where you want to call the transparent.

<View style={styles.overlay}> 
 <Image style={styles.people} src={{uri:'path'}}/> 
</View>

Issue5: Cannot read property ‘_root‘ of the undefined react-native drawer – You should change your _openDrawer to (cause your function doesn’t know about context this).

Solution:

_openDrawer = () => { 
 this.drawer._root.open();
}

Issue6: How to change the display name of react native app in iOS.

Solution: Goto ios/<Appname>/Info.plist and edit the $(PRODUCT_NAME) to change the display name

<key>CFBundleName</key> 
<string>$(PRODUCT_NAME)</string>

Issue7: How to change the display name of react native app in Android.

Solution: Goto android/app/src/main/res/values/strings.xml and edit the APP_NAME to change the name.

<string name="app_name">APP_NAME</string>

Issue8: Vector icon not working it shows the question mark .

Solution:  it happens just because you don’t link it or it not linked properly, please link it properly.

Issue9: English keyboard did not type RTL(right to left) in react native.

Solution: There is a library I18nManager that manages this type of functionality.

import { I18nManager } from 'react-native'

and add this to your styles.

textAlign : I18nManager.isRTL ? 'right' : 'left'

Issue10: In react-native change is reflected in hot reloading but not in reality, or error ENOENT: no such file or direct release\index.android.bundle.map’. Run CLI with –verbose flag for more details

Solution: This is happening just because you didn’t properly link all things so please run this code first then generate the build, which means you don’t apply the bundle making a command.

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

I hope you find it useful and some of your issues is resolved helping of this.

and you can find my post on medium as well click here please follow me on medium as well.

So this “Some of the common issues in react native part – 1” is completed, “you can find the next issue list here.

And if any other query/issue, please feel free to ask.

Happy Coding Guyz.