i have used createDrawerNavigator but its not working
my code is
//App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {createDrawerNavigator} from 'react-navigation';
import HomeScreen from './HomeScreen';
import SettingsScreen from './SettingsScreen';
class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Hey</Text>
<MyApp/>
</View>
);
}
}
export default App;
const MyApp=createDrawerNavigator({
Home:{
screen:HomeScreen
},
Settings:{
screen :SettingsScreen
}
});
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
//HomeScreen.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
class HomeScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Hey There</Text>
</View>
);
}
}
export default HomeScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
//SettingScreen.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
class SettingsScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Hey There</Text>
</View>
);
}
}
export default SettingsScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
please anyone knows how to create drawerlayout in react-native explain it to me
Removing the alignItems: 'center' of your HomeScreen style should do the job.
Related
Building a Signal clone and trying to have my to be styled from my StyleSheet. Here is the code
import "react-native-gesture-handler";
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { NavigationContainer } from "#react-navigation/native";
import LoginScreen from "./screens/LoginScreen";
import { createStackNavigator } from "#react-navigation/stack";
import RegisterScreen from "./screens/RegisterScreen";
const Stack = createStackNavigator();
const globalScreenOptions = {
headerStyle: { backgroundColor: "#2C6BED" },
headerTitleStyle: { color: "white" },
headerTintColor: "white",
};
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={globalScreenOptions}>
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Register" component={RegisterScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
I have tried to put everything in a tag to get it to be affected by the StyleSheet, but that won't work either. I'm unable to find any other similar posts to this question
To use the styles created by StyleSheet.create, you need to actually use them in an element. For example (from the stylesheet docs):
import React from "react";
import { StyleSheet, Text, View } from "react-native";
const App = () => (
<View style={styles.container}> {/* <-- note style attribute */}
<Text style={styles.title}>React Native</Text>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
backgroundColor: "#eaeaea"
},
title: {
marginTop: 16,
paddingVertical: 8,
textAlign: "center",
}
});
export default App;
I am trying to position my bottomnavbar to the bottom of my screen, but is is not working?
I've been trying to set the position to absolute and then bottom: 0, but if I do it in the app.js component on or do it straight in the stylesheet of the bottomNavbar.js component, none of it works.
here is my app.js component:
import React, {Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';
class BottomNavbar extends Component {
render() {
return (
<View style={styles.container}>
<Text>insights</Text>
<Text>Incidents</Text>
<Text>PLUS</Text>
<Text>Team Alerts</Text>
<Text>More</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'space-around',
backgroundColor: 'grey',
position: 'absolute',
bottom: 0,
},
});
export default BottomNavbar;
And here is my BottomNavbar component:
import React, {Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';
class BottomNavbar extends Component {
render() {
return (
<View style={styles.container}>
<Text>insights</Text>
<Text>Incidents</Text>
<Text>PLUS</Text>
<Text>Team Alerts</Text>
<Text>More</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'space-around',
backgroundColor: 'grey',
position: 'absolute',
bottom: 0,
},
});
export default BottomNavbar;
Now I would like the bottomnavbar to show up at the bottom of the phonescreen, but I cannot figure out how to do that.
Try this one
import { AppRegistry } from 'react-native';
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
class BottomNavbar extends Component {
render() {
return (
<View style={styles.container}>
<Text>insights</Text>
<Text>Incidents</Text>
<Text>PLUS</Text>
<Text>Team Alerts</Text>
<Text>More</Text>
</View>
);
}
}
class App extends Component {
render() {
return (
<View style={styles.appContainer}>
{/* ...other components */}
<BottomNavbar />
</View>
);
}
}
const styles = StyleSheet.create({
appContainer: {
flex: 1,
},
container: {
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
backgroundColor: 'grey',
position: 'absolute',
bottom: 0,
width: '100%',
height: 80,
},
});
AppRegistry.registerComponent('myApp', () => App);
i'm currently trying to implement custom component to show the icon i've.
i got no error when rendering it , but 2 of list of screen didn't shows up. am i need to do something with styling or there's a problem with my code
if anyone could inspect my code that would be awesome
this is my error
here are my code
App.js
import React from 'react';
import {
StyleSheet,
View,
SafeAreaView,
ScrollView,
Dimensions,
Image,
Text
} from 'react-native';
import {
createDrawerNavigator,
DrawerItems
} from 'react-navigation';
import HomeScreen from './screen/HomeScreen';
import SettingsScreen from './screen/SettingsScreen';
export default class App extends React.Component {
render () {
return (
<AppDrawerNavigator />
);
}
}
const CustomDrawerComponent = ( props ) => (
<SafeAreaView style={{flex: 1}}>
<ScrollView>
<View style={{height:150,backgroundColor:'white',alignItems: 'center', justifyContent: 'center' }}>
<Image
source={require('./img/cs.png')}
style={{height:120, width:120, borderRadius: 20}}
/>
</View>
</ScrollView>
</SafeAreaView>
)
const AppDrawerNavigator = createDrawerNavigator ({
Home: HomeScreen,
Settings: SettingsScreen
},{
contentComponent: CustomDrawerComponent
})
const styles = StyleSheet.create({
container: {
flex: 0,
color: '#fff',
alignItems: 'center',
justifyContent: 'center'
}
});
Homescreen.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
class HomeScreen extends Component {
render () {
return (
<View style={styles.container}>
<Text>Home</Text>
</View>
);
}
}
export default HomeScreen ;
const styles = StyleSheet.create({
container: {
flex: 1,
color: '#fff',
alignItems: 'center',
justifyContent: 'center'
}
});
According to the official doc, your Drawer Navigator has to be defined like:
const AppDrawerNavigator = createDrawerNavigator({
Home: {
screen: HomeScreen,
},
Settings: {
screen: SettingsScreen,
}
});
You're not assigning an object with a prop screen to each custom screen.
For more details take a look at doc.
as I understand, you need to add DrawerItems to your drawer.
import { DrawerItems, SafeAreaView } from 'react-navigation';
const CustomDrawerComponent = ( props ) => (
<SafeAreaView style={{flex: 1}}>
<ScrollView>
<View style={{height:150,backgroundColor:'white',alignItems: 'center', justifyContent: 'center' }}>
<Image
source={require('./img/cs.png')}
style={{height:120, width:120, borderRadius: 20}}
/>
</View>
<DrawerItems {...props} />
</ScrollView>
</SafeAreaView>
)
picture
My problem is that I don't know were to put "title". I have TabNavigator, with two pages. You can see on the image, which is what I really want to do.
import React from 'react';
import { Text, View,Button } from 'react-native';
import { createMaterialTopTabNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<View >
<Button
title='Click me'
onPress={() => this.props.navigation.navigate('HomeScreen')} />
</View>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}
export default createMaterialTopTabNavigator({
Test1: { screen: HomeScreen },
Test2: { screen: SettingsScreen },
});
One possible solution is to wrap the MaterialTopTabNavigatorinside a StackNavigator and add the title option to it. So your code should looks something similar to this:
import React from 'react';
import { Text, View,Button } from 'react-native';
import { createMaterialTopTabNavigator, createStackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<View >
<Button
title='Click me'
onPress={() => this.props.navigation.navigate('HomeScreen')} />
</View>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}
const App = createMaterialTopTabNavigator({
Test1: { screen: HomeScreen },
Test2: { screen: SettingsScreen },
});
export default createStackNavigator({
app: {
screen: App,
navigationOptions: {
title: 'Screen title',
},
},
});
Im starting a react-native project. But even after following best community working code, Im getting errors on device emulation. Could you please help ?
import React, { Component } from 'react';
import { Appregistry, Text,View ,StyleSheet} from 'react-native';
import Compo from './app/app/Compo';
export default class test extends Component {
render(){
return(
<View>
<Compo />
</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('test', () =>test);
and my called app is
import React, { Component } from 'react';
import { Appregistry,Text,View,StyleSheet } from 'react-native';
export default class Compo extends Component {
render(){
return(
<View>
<Text>Hi Bineesh</Text>
</View>
)
}
}
AppRegistry.registerComponent('Compo', () => Compo);
Why this is throwing error AppRegistry ?
Javascript is caseSensitive and the word Appregistry was to be as AppRegistry.