Develop Reference

React Navigation - Auth Flow - Error The specified child already has a parent on Android

I'm trying to implement an Auth Flow on react native with react-navigation as it's done in the doc (https://reactnavigation.org/docs/auth-flow). But when the state change in order to show the HomeNavigator I get the following error (only on Android, it's work on iOS) :
The specified child already has a parent. You must call removeView() on the child's parent first.
...
onCreateView (ScreenStackFragment.kt:129)
...
// App.tsx
return (
<ReduxProvider store={rootStore}>
<NavigationContainer ref={navigationRef}>
<RootNavigator />
</NavigationContainer>
</ReduxProvider>
);
// RootNavigator.tsx
export const RootNavigator = selectConnect(selectCurrentUser)((props: Partial<CurrentUserProps>) => {
return (
<Stack.Navigator
screenOptions={{
headerShown: false,
gestureEnabled: true,
}}>
{props.isAuthenticated ? (
<Stack.Screen name="HomeNavigator" component={HomeNavigator} />
) : (
<Stack.Screen name="LoginNavigator" component={LoginNavigator} />
)}
</Stack.Navigator>
);
});
// Note : selectConnect is just a custom function to use connect (redux) with selector
I can found any solution for this problem, so any help will be appreciated.
Thanks.
Environment
React-Native: 0.66.0
#react-navigation/native: 6.0.4
#react-navigation/native-stack: 6.2.2
Running OS : Android (work fine on iOS)
Edit: Breaking news, it's seem to be due to #react-navigation/drawer (that need react-native-reanimated) but both are for now unused in my project (it still an issue because I will need these soon).
#react-navigation/drawer: 6.1.6
react-native-reanimated: 2.3.0-beta.2 (the only version that support react native 0.66.0)
Minimal project to reproduce : https://github.com/LaGregance/ErrorAuthFlowReactNavigation

For those who facing the same issue I have temporary fixed it by downgrading react-native to version 0.65.1 and react-native-reanimated to 2.2.2
So obviously it an issue of react-native-reanimated.
I will now refer to : https://github.com/software-mansion/react-native-reanimated/issues/2501

React native :Unable to resolve module Indeed, none of these files exist:

I'm following this medium article to use FloatingTitleTextInputField in my react-native project
below is my project structure
Here is my code for HomeScreen.js
import React, {Component} from 'react';
import {Text, View, TextInput, StyleSheet} from 'react-native';
import FloatingTitleTextInputField from './customComponents/floating_title_text_input_field';
export default class HomeScreen extends Component {
render() {
return (
// <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
// <Text>My First React App</Text>
// <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} />
// </View>
<View style={styles.container}>
<View style={styles.container}>
<Text style={styles.headerText}>Its Amazing</Text>
<FloatingTitleTextInputField
attrName="firstName"
title="First Name"
value={this.state.firstName}
updateMasterState={this._updateMasterState}
/>
<FloatingTitleTextInputField
attrName="lastName"
title="Last Name"
value={this.state.lastName}
updateMasterState={this._updateMasterState}
/>
</View>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 65,
backgroundColor: 'white',
},
labelInput: {
color: '#673AB7',
},
formInput: {
borderBottomWidth: 1.5,
marginLeft: 20,
borderColor: '#333',
},
input: {
borderWidth: 0,
},
});
When i try to use FloatingTitleTextInputField inside HomeScreen.js I'm getting below error
error Unable to resolve module `./floating_title_text_input_field` from `React Native/AwesomeProject/screens/
HomeScreen.js`: The module `./floating_title_text_input_field` could not be found from `/React Native/AwesomeProject/screens/HomeScreen.js`. Indeed, none of these files exist:
* `/React Native/AwesomeProject/screens/floating_title_text_input_field(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
* `/React Native/AwesomeProject/screens/floating_title_text_input_field/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`. Run CLI with --verbose flag for more details.
Error: Unable to resolve module `./floating_title_text_input_field` from `React Native/AwesomeProject/screens/HomeScreen.js`: The module `./floating_title_text_input_field` could not be found from `/React Native/AwesomeProject/screens/HomeScreen.js`. Indeed, none of these files exist:
Can anybody help me to solve this issue
If need more information please do let me know. Thanks in advance. Your efforts will be appreciated.

You can clean the cache on your bundler:
npm start --clean-cache

You're referencing it from the HomeScreen component which is in the screens directory. Because you're using the local ./ path, it's trying to find it in screens/customComponents. Using ../customComponents/floating_title_text_input_field should fix it.

Even though your mistake was using the wrong path during the require statement, I think it might be useful to share how I solved this issue, where file import path wasn't the reason for the error. I encountered this issue after I added some image assets and required them in my components. But I forgot to build the app again. After several attempts, this is the solution that worked for me.
Stop your development server.
Install the app on your android device or emulator, using yarn android/ios.
Start the development server using yarn start.

The FloatingTitleTextInputField component seems a named export. So import it like import { FloatingTitleTextInputField } from 'the source'.
Or simply default export the FloatingTitleTextInputField like export default class FloatingTitleTextInputField in the floating_title_text_input_field.js file.

LottieView shuts down the app on android and works on IOS

When using lottie in expo and react-native, all animations work on ios however crash the app on android. Is there something special for android I am missing?
I have created a new project and duplicated the issue by coping the code from the docs here
import React from 'react';
import { Button, StyleSheet, View } from 'react-native';
import LottieView from "lottie-react-native";
export default class App extends React.Component {
componentDidMount() {
this.animation.play();
// Or set a specific startFrame and endFrame with:
// this.animation.play(30, 120);
}
resetAnimation = () => {
this.animation.reset();
this.animation.play();
};
render() {
return (
<View style={styles.animationContainer}>
<LottieView
ref={animation => {
this.animation = animation;
}}
style={{
width: 400,
height: 400,
backgroundColor: '#eee',
}}
source={require('./assets/gradientBall.json')}
// OR find more Lottie files # https://lottiefiles.com/featured
// Just click the one you like, place that file in the 'assets' folder to the left, and replace the above 'require' statement
/>
<View style={styles.buttonContainer}>
<Button title="Restart Animation" onPress={this.resetAnimation} />
</View>
</View>
);
}
}

If you are using Expo, you can't use Lottie 3 Files. From the expo api reference (https://docs.expo.io/versions/latest/sdk/lottie/):
"
Known Issues:
The Lottie SDK is currently considered to be under Expo's "DangerZone" because it's implementation is still in Alpha.
Importing Lottie 3 files causes the previewer to crash without a visible error, because Expo relies on lottie-react-native v2.
"

Run Yarn add lottie-react-native#3.0.3 or npm install lottie-react-native#3.0.3

React Native Native Java/Android Module - not showing toast message

I'm using the example found here & currently facing issue with the toast not showing at all... I just have the initial 'Welcome to React Native!' screen in the emulator. My app structure is as follows:
testApp
android
app
src
main
java
com
testApp
CustomToastPackage.java
MainActivity.java
MainApplication.java
ToastModule.java
res
assets
index.android.bundle
AndroidManifest.xml
ios
node_modules
app.json
App.js
index.js
package.json
ToastExample.js
yarn.lock
My index.js
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import {NativeModules} from 'react-native'; //Added this
module.exports = NativeModules.testApp; //Added this
AppRegistry.registerComponent(appName, () => App);
My App.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import ToastExample from './ToastExample'; //Added this
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
As you can see from the file structure I created an additional file named ToastExample.js that contains following based upon the answer found here
import {NativeModules} from 'react-native';
module.exports = NativeModules.ToastExample;
Package name is simply
com.testapp
I can't figure out why the toast never shows? I know react comes with toast support but looking to build upon an initial example to include more advanced Java/Android code...

In your example you didn't add ToastExample in index.js you need to add this into rendering method in index.js like below.
return(
<ToastExample/>
)
In addition to that, you are going to create an android native module which can be used only for android.
But According to my point of view, you can use toast messages module which can be used in both Android and Ios. Otherwise, you need to create ios base native module for creating toast for ios. If u don't want to ios base implementation, it's ok to use this native module. But you block your Ios deployment by it.
I would like to suggest this https://github.com/crazycodeboy/react-native-easy-toast#readme
easy-toast for u. It will work on both Android and IOS devices. You can customize it like android native toast as well. It is easy to implement in your application.

Thanks #Ariel & #Lucefer for feedback, I made the update you suggested but ran into another error. Posting this answer to save anyone potential headache caused by using Android Studio as IDE with React Native. Turns out the MainApplication.java file had 2 items (import of CustomToastPackage & ReactPackage) greyed out & could never figure out why? See the screenshot below
I created a separate application (react-native init newapp) & used a simple text editor (Atom or gedit will do instead of Android Studio) to make the changes & the example runs just fine now.

try this:
<Root>
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
</Root>
just import Root to react native

React-native: Images not showing in android device; but shows perfectly in emulator

I am working on a sample react native project. And almost all features except the <Image source=''/> work well with it. The image shows well in android emulator supplied with android studio and genymotion, but does not work on any real devices (moto G3 turbo, nexus 5, galaxy s4 etc...). I don't know what went wrong with my code. Here is my code
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
class ImageTester extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
<Image source={require('./img/first_image.png')}></Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('ImageTester', () => ImageTester);
project structure:
React-native version : react-native: 0.32.1

The problem was with my bundle packaging command. As #luwu said in his comment, I checked this, and surprised that there is no difference with mine. Then only I noticed a message while running the command
"Assets destination folder is not set, skipping..."
That message was bit confusing since bundle was already created in the assets folder. The 'Assets' in that messages actually indicates my images. And I solved the issues with the following command:
react-native bundle --platform android --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --dev false --reset-cache --assets-dest android/app/src/main/res/

Another solution for the same issue of assets not bundled in development.
Add the following line to your app/build.gradle file in the section project.ext.react:
project.ext.react = [
... other properties
bundleInDebug: true // <-- add this line
]
From the docs in the starter project gradle file:
By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the bundle directly from the development server.

i had the same issue. turns out i had import image component from react-native-elements instead of rect-native.fixed my case

I was having a similar issue on my project. My problem was that the Image is displaying ok on iOS but not showing on android (devices).
So my issue got fixed by adding the following header to my Image:
<Image
source={{
uri: 'https://imageurladdress/img.png',
headers: {
Accept: '*/*',
},
}}
style={styles.imageStyle}
/>
So, for some reason the iOS was already working without the need to add this header in the request. But the point is that after add the headers field, the Image is showing correct on both iOS and android devices.

In my case two things were causing problems
First
I run my backend at http://localhost:3000 and any image asset would have URI similar to
http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOns
but the android simulator exposes it as
http://10.0.2.2:3000/.....
So http://localhost:3000 is inaccessible in simulator. So I made sure appropriate host is set from backend looking which device is requesting the API.
Second
In params supplied to <Image> component, I used url key(property) which was working fine in IOS but I needed to change it to uri for android.

What helped me personally (none of the solutions here worked) is opening external image from the https://.... and it worked. So I decided to give a try to use 'file://' + DocumentDirectoryPath + '/' + item.image and it worked.