I have been trying for days now to add screens with different cars to the navigation stack. help??
My Expo Snack Link
app.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, View } from 'react-native';
import CarsList from './components/CarsList';
import Header from './components/Header';
import { NavigationContainer } from '#react-navigation/native';
export default function App() {
return (
<NavigationContainer>
<View style={styles.container}>
<Header />
<CarsList />
<StatusBar style="auto" />
</View>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Related
I've got a component(Bottom.js) inside of another component(LoginScreen.js), inside this component(Bottom.js) there is a button(TouchableOpacity), I want to press it and change the LoginScreen to RegisterScreen, but I can't! I tried to see the docs of react navigation and I still confused. Could someone help me?
App.js
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
//import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet } from 'react-native';
import LoginScreen from './src/screens/Login/LoginScreen';
import RegisterScreen from './src/screens/Register/RegisterScreen';
import mock from './src/mocks/Login'
const Stack = createStackNavigator();
const MyTheme = {
dark: false,
colors: {
background: 'rgb(7, 19, 24)',
},
};
export default function App(){
return (
<NavigationContainer theme={MyTheme}>
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen name='Login' >
{() => <LoginScreen {...mock}/>}
</Stack.Screen>
<Stack.Screen name='Register' >
{() => <RegisterScreen />}
</Stack.Screen>
</Stack.Navigator>
</NavigationContainer>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#071318',
},
});
LoginScreen.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import {Button, Input, Image} from 'react-native-elements'
import Top from './components/Top'
import Form from './components/Form'
import ButtonEnter from './components/ButtonEnter'
import Bottom from './components/Bottom'
export default function LoginScreen({top, form, buttonEnter, bottom, navigation})
{
return <>
<View style={styles.background}>
<StatusBar style='light'/>
<Top {...top}/>
<Form {...form}/>
<ButtonEnter {...buttonEnter}/>
<Bottom {...bottom} {...navigation}/>
</View>
</>
}
const styles = StyleSheet.create({
background:{
backgroundColor: "#071318"
},
text:{
color:'#AAA',
fontSize: 16,
},
logo:{
width: 160,
height: 160,
marginHorizontal: '25%',
marginTop: '15%'
}
})
Bottom.js
import React from 'react';
import { StyleSheet,View, Text, TouchableOpacity} from 'react-native';
export default function Bottom({signupButtonText, navigation})
{
return <>
<View style={styles.view}>
<TouchableOpacity style={styles.button} onPress={() => navigation.navigate('Register')}>
<Text style={styles.helpButton}>{signupButtonText}</Text>
</TouchableOpacity>
</View>
</>
}
const styles = StyleSheet.create({
view:{
flexDirection:'row',
width: '70%',
height:'40%',
marginHorizontal:'15%',
justifyContent:'center',
},
button:{
marginTop: 16,
backgroundColor: '#0B2027',
paddingVertical: 12,
borderRadius:20,
width: 80,
alignItems: 'center',
position: 'absolute',
bottom: 30
},
image:{
width:'30%',
marginHorizontal:'35%'
},
helpButton:{
color:'white',
justifyContent:'space-around'
}
})
Register.js
import React from 'react'
import { View, Text } from 'react-native'
const RegisterScreen = ({navigation}) => {
return (
<View>
<Text>register</Text>
</View>
)
}
export default RegisterScreen
Bottom component is expecting to receive Navigation, not its properties, so try this:
<Bottom navigation={navigation} {...bottom}/>
i have been trying to make a BottomTabNavigator for my app but has been unable to do so. Kindly help me in identifying error in the code.
This is the code written in App.js
import * as React from 'react';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import mapscreen from './screens/MapScreen';
import groupscreen from './screens/GroupScreen';
import { NavigationContainer } from '#react-navigation/native';
const Tab = createBottomTabNavigator();
export default () => (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="map" component={mapscreen}/>
<Tab.Screen name="group" component={groupscreen} />
</Tab.Navigator>
</NavigationContainer>
);
This the code written in MapScreen.js
import * as React from 'react';
import { View, Text,StyleSheet} from 'react-native';
export const mapscreen = () => {
<View style = {styles.container}>
<Text>
Map will exist here!!
</Text>
</View>
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
This is the code written in GroupScreen.js
import * as React from 'react';
import { View, Text,StyleSheet} from 'react-native';
export const groupscreen = () => {
<View style = {styles.container}>
<Text>
group exist here!!
</Text>
</View>
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
Working App: Expo Snack
There were few syntactical errors, other than that everything was fine.
//App.js
import * as React from 'react';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import MapsScreen from './screens/MapsScreen';
import GroupScreen from './screens/GroupScreen';
import { NavigationContainer } from '#react-navigation/native';
const Tab = createBottomTabNavigator();
export default App=() => (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Map" component={MapsScreen} />
<Tab.Screen name="Group" component={GroupScreen} />
</Tab.Navigator>
</NavigationContainer>
);
//MapsScreen.js
import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default MapsScreen = ({navigation}) => {
return <View style={styles.container}>
<Text>Map will exist here!!</Text>
</View>;
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
//GroupScreen.js
import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default GroupScreen = ({navigation}) => {
return <View style={styles.container}>
<Text>group exist here!!</Text>
</View>;
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
I would just like to be redirected to my "Profile" page when I click on the "Enter" button. I don't know if this is the correct method but my homepage is App.js and it contains my button and my image. Sorry for the mistakes I am a beginner and moreover French!
app.js
import 'react-native-gesture-handler';
import React from 'react';
import DisplayAnImage from './Components/DisplayAnImage';
import Profile from './Components/Profile';
import { Enter } from './Components/Enter';
import { StyleSheet, Text, ScrollView } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
export default class App extends React.Component {
render() {
return (
<ScrollView style={{ flex: 1 }}>
<DisplayAnImage/>
<Enter/>
</ScrollView>
)
}
}
enter.js
import React from 'react';
import { Platform, StyleSheet, Text, View, Image, Button, Alert, SafeAreaView } from 'react-native';
import Profile from './Profile.js';
import { createStackNavigator } from '#react-navigation/stack';
import { StackNavigator } from 'react-navigation';
export const Enter = ({ navigation }) => {
return (
<SafeAreaView style={styles.Button}>
<View>
<Button
title="Entrer"
color="#FFFFFF"
onPress={() => this.props.navigation.navigate('Profile')}
/>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
Button: {
flex: 1,
marginHorizontal: 120,
borderRadius: 20,
backgroundColor: '#1067b3'
},
title: {
textAlign: 'center',
marginVertical: 8,
},
fixToText: {
flexDirection: 'row',
justifyContent: 'space-between',
},
separator: {
marginVertical: 8,
borderBottomColor: '#737373',
borderBottomWidth: StyleSheet.hairlineWidth,
},
});
profile.js
import React, {Component} from 'react';
import { View, Text } from 'react-native';
export default class Profile extends React.Component {
render() {
return (
<View>
<Text>Profile</Text>
</View>
);
}
}
Thank you very much for your help
You are calling "this" from your functional component. Please change this
onPress={() => this.props.navigation.navigate('Profile')}
to
onPress={() => navigation.navigate('Profile')}
I simply created a react-native-project using expo and added react-native-tts and tried to use the speak function but it is giving Native module cannot be null.
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import Tts from 'react-native-tts';
export default function App() {
return (
<View style={styles.container}>
<Button
onPress = {() => {Tts.speak("Hello, world!")}}
title = "voice"
/>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
This is an expo project and react-native-tts is not made for expo. So for text to speech I need to use expo-speech or eject the project from expo.
I want to show tab bar in my react-native app using react-navigation library. I've tried code from an example provided in the documentation. However, when I run the code on iOS simulator the screen appears to be blank, tab bar doesn't load.
Here's my code so far,
TabNavigator.js
import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}
const TabNavigator = createBottomTabNavigator(
{
Home: HomeScreen,
Settings: SettingsScreen,
},
{
initialRouteName: "Home"
}
);
export default createAppContainer(TabNavigator);
App.js
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation';
import TabNavigator from './components/TabNavigator';
const App = () => {
return (
<View>
<TabNavigator />
</View>
);
};
export default App;
Looking at the App.js code, you forgot to put flex:1 to the view, it's one of the common mistakes that react-navigation tells about in his documentation.
const App = () => {
return (
<View style={ { flex:1} }>
<TabNavigator />
</View>
);
};
Source: https://reactnavigation.org/docs/en/common-mistakes.html#wrapping-appcontainer-in-a-view-without-flex