I'm testing out React Navigation's BottomTabNavigator but after running it in ios simulator I'm getting a black screen.
Steps to reproduce:
Create react native project react-native init Example
Install and link react-navigation and deps npm install --save react-navigation react-native-gesture-handler && react-native link react-native-gesture-handler
Replace the App.js content with:
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,
});
export default createAppContainer(TabNavigator);
Then run in simulator react-native run-ios
I've also tried deleting node_modules, build folders & cleaning npm cache & simulator contents.
If you don't get an error, it might just be because you didn't set a background color on your <View> tags.
Try this:
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', backgroundColor:'#fff' }}>
<Text>Home!</Text>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor:'#fff' }}>
<Text>Settings!</Text>
</View>
);
}
}
const TabNavigator = createBottomTabNavigator({
Home: HomeScreen,
Settings: SettingsScreen,
});
export default createAppContainer(TabNavigator);
Hope this helps.
Related
I am trying to apply some styles in my react native application but it's not working with me, I tried to run it in the browser this is the output showed up:
But when I run it in my phone it's showing me an error:
This is the main App.js file:
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { View } from 'react-native';
import HomeMenu from './src/screens/Home/index';
export default function App() {
return (
<View style={{ flex: 1 }}>
<StatusBar style="auto" />
<HomeMenu />
</View>
);
}
And this is index.js file (the one I want to show its results):
import React from 'react';
import { View, Text, StyleSheet, SafeAreaView } from 'react-native';
const HomeMenu = () => {
return (
<SafeAreaView style={{ flex: 1 }}> //add flex:1 here
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
</SafeAreaView>
);
};
export default HomeMenu;
const styles = StyleSheet.create({
container: {
flex: 3,
backgroundColor: '#21534A',
alignItems: 'center',
justifyContent: 'center',
},
});
Please if you know what's wrong in my code let me know.
try like this:-
import React from 'react';
import { View, Text, StyleSheet, SafeAreaView } from 'react-native';
const HomeMenu = () => {
return (
<SafeAreaView style={{ flex: 1 }}>
//add flex:1 here
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
</SafeAreaView>
);
};
export default HomeMenu;
const styles = StyleSheet.create({
container: {
flex: 3,
backgroundColor: '#21534A',
alignItems: 'center',
justifyContent: 'center',
},
});
How do I get the component added by createMaterialTopTabNavigator to move out of the status bar's way? Here's my code:
import React from 'react';
import { Text, View } from 'react-native';
import { createMaterialTopTabNavigator } from 'react-navigation';
class Screen1 extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Screen1!</Text>
</View>
);
}
}
class Screen2 extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Screen2!</Text>
</View>
);
}
}
class Screen3 extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Screen3!</Text>
</View>
);
}
}
export default createMaterialTopTabNavigator ({
"Screen1": Screen1,
"Screen2": Screen2,
"Screen3": Screen3,
});
See status bar overlap
This is my first react native project and I may be missing something crucial. Any pointers appreciated.
Install Expo constants to retrieve the statusBarHeight Prop.
expo install expo-constants
Now set the style prop of Material Top Tab Navigator and give it marginTop.
import Constants from 'expo-constants'
const TopTab = createMaterialTopTabNavigator();
const RequestNavigator = () => (
<TopTab.Navigator style={{ marginTop: Constants.statusBarHeight }}>
<TopTab.Screen name="Account" component={Account} />
<TopTab.Screen name="Profile" component={Profile} />
<TopTab.Screen name="Settings" component={Settings} />
</TopTab.Navigator>
);
if you're not using expo, you can use https://www.npmjs.com/package/react-native-status-bar-height to retrieve the statusBar height
Just replace your View with SafeAreaView and it should help.
import { Text, SafeAreaView } from 'react-native';
import { createMaterialTopTabNavigator } from 'react-navigation';
class Screen1 extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Screen1!</Text>
</View>
);
}
}
class Screen2 extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Screen2!</Text>
</View>
);
}
}
class Screen3 extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Screen3!</Text>
</View>
);
}
}
export default createMaterialTopTabNavigator ({
"Screen1": Screen1,
"Screen2": Screen2,
"Screen3": Screen3,
});
Current behavior
When I attempt to invoke the Video library (import { Video } from 'react-native-video') my application breaks with the error of Module AppRegistry is not a registered callable module (calling runApplication)
Reproduction steps
My Video component is as follows:
import React, { Component } from 'react';
import { Video } from 'react-native-video';
import {
View,
Dimensions,
TouchableOpacity,
TouchableWithoutFeedback,
Animated,
Text,
Slider,
NetInfo,
StyleSheet
} from 'react-native';
class VideoPlayer extends Component {
state = {
paused: true
};
render() {
const videoWidth = Dimensions.get('window').width;
const videoHeight = videoWidth * (9 / 16);
const styles = StyleSheet.create({
videoContainer: {
width: videoWidth,
height: videoHeight,
backgroundColor: 'rgb(255,255,255)',
paddingTop: 0
}
})
return (
<Video
source={{ uri: 'https://www.youtube.com/embed/3NhHqPA8nIs?rel=0&autoplay=0&showinfo=0&controls=0' }}
paused={this.state.pause}
style={styles.videoContainer}
/>
)
}
}
export default VideoPlayer;
and App.js
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import Header from './components/Header';
import VideoPlayer from './components/Video';
export default class App extends Component {
render () {
return (
<View style={styles.container}>
<View style={styles.headerContainer}>
<Header />
</View>
<View style={styles.videoContainer}>
<VideoPlayer />
</View>
<Text style={{color: 'white'}}>Hello Wilbur!</Text>
<Text style={{color: 'white'}}>Some text</Text>
<Text style={{color: 'white'}}>some other text</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'rgb(4,4,4)',
alignItems: 'center',
justifyContent: 'center',
},
headerContainer: {
position: 'absolute',
flex: 1,
top: 0,
height: 72,
alignSelf: 'stretch',
paddingTop: 20,
paddingLeft: 12,
paddingRight: 12,
flexDirection: 'row',
backgroundColor: 'white'
},
videoContainer: {
flex: 0,
backgroundColor: 'rgb(4,4,4)',
alignItems: 'center',
justifyContent: 'center',
paddingTop: 0
}
});
If I do not instantiate the component I can render the application fine, and even make it work with a WebView, however when I attempt to import my VideoPlayer component I receive the aforementioned error.
Expected behavior
A functional video component, or at least an error related to the video player.
Platform
iOS
Video sample
https://www.youtube.com/embed/3NhHqPA8nIs?rel=0&autoplay=0&showinfo=0&controls=0
Does anyone see what I'm doing wrong?
Thank you.
react-native-video does not currently support youtube...
https://github.com/react-native-community/react-native-video/issues/1147
I have 3 main screen components which are the tabs in my TabNavigator: Feed, Discover, and Me. I also have other pages which I need to be able to navigate to from those 3 main pages. However, I can't just nest a StackNavigator in my TabNavigator because some of my subpages, I need to be able to access from every tab.
This is a lot like how apps like Instagram work. Say for example you're looking at your feed and you tap on someone's username and their page comes up. However, this user's page is also accessible from your user page by finding their username in a list of your followers.
How should I configure my navigation?
Please get the idea from these projects I have made.
https://github.com/paraswatts/StackNavigator-inside-TabNavigator
https://github.com/paraswatts/ParasWatts
//App.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
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',
});
import RootStack from './src/home';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<RootStack/>
);
}
}
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,
},
});
//home.js
import { StackNavigator } from 'react-navigation';
import Tab from './tab';
import SomeScreen from './somescreen';
const RootStack = StackNavigator({
Tab: {
screen: Tab,
},
SomeScreen: {
screen: SomeScreen,
},
});
export default RootStack;
//tab.js
import { TabNavigator } from 'react-navigation';
import Tab1 from './tab1';
import Tab2 from './tab2';
const Tabs = TabNavigator({
Tab1: {
screen: Tab1,
},
Tab2: {
screen: Tab2,
},
});
export default Tabs;
//tab1.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';
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',
});
export default class Tab1 extends Component {
render() {
const { navigate } = this.props.navigation
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to Tab1!
</Text>
<TouchableOpacity style={{width:300,height:50,borderColor:'#000',borderWidth:2}} onPress={()=>{
navigate('SomeScreen',{tabno:'one'})
}}>
<Text style={styles.welcome}>
Go to another screen
</Text>
</TouchableOpacity>
<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,
},
});
//tab2.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';
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',
});
export default class Tab2 extends Component {
render() {
const { navigate } = this.props.navigation
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to Tab2!
</Text>
<TouchableOpacity style={{width:200,height:50,borderColor:'#000',borderWidth:2}} onPress={()=>{
navigate('SomeScreen',{tabno:'two'})
}}>
<Text>
Go to another screen
</Text>
</TouchableOpacity>
<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,
},
});
//somescreen.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
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',
});
export default class SomeScreen extends Component {
render() {
const {params} = this.props.navigation.state
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Coming from Tab Number {params.tabno}
</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,
},
});
You can set tabBarComponent to any react component. This way you can customize your tabbar and you can handle what screen you want to show( in your case only three)
Also you can add any number of screens to you tabNavigator and all those screen will have all the navigator props available. So that you can jump from any screen to any screen. You will have full controll on what to show User as well as navigate to anywhere.
Can someone tell me what I am doing wrong ?
I am pretty new to React Native and I am following the example for React Navigator from here.
The app is developed via Expo IDE.
https://reactnavigation.org/docs/intro/quick-start
This is my src code for App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { RootNavigator } from './src/RootNavigator';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<RootNavigator />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
This is my src code for RootNavigator.js
import React from 'react';
import { View, Text } from 'react-native';
import { StackNavigator } from 'react-navigation';
const HomeScreen = () => (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
const DetailsScreen = () => (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
const RootNavigator = StackNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
headerTitle: 'Home',
},
},
Details: {
screen: DetailsScreen,
navigationOptions: {
headerTitle: 'Details',
},
},
});
export default RootNavigator;
Rootnavigator.js which is located inside a src folder (attached the screenshot)
I am getting this error while trying to run it in my iphone.
You're doing export default App which is an unnamed export, therefore you need to change:
import { RootNavigator } from './src/RootNavigator';
to
import RootNavigator from './src/RootNavigator';
More info about es6 import/export here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export