I need to create a simple layout.
I have a header component and beneath it I have a navigation tabs with content (see sketch - https://imgur.com/a/9H7FMYU).
I wish to achieve this with react navigation or react native navigation.
The reason I don't want to use react-native-tab-view is because it's not maintained and have a lot of bugs.
EDIT: I just found out that React navigation uses react-native-tab-view for displaying tabs. Therefore if you are looking for a solution, either use #user:568754 answer bellow or use react-native-tab-view with a header
I think what you are looking for is the MaterialTopTabNavigator component in react-navigation.
Here is some sample code:
import React from 'react';
import { Text, View } from 'react-native';
import { createMaterialTopTabNavigator, createStackNavigator, createAppContainer } from 'react-navigation';
class Head extends React.Component {
render() {
return (
<View style={{ height: 200, backgroundColor: 'blue' }}/>
);
}
}
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 = createMaterialTopTabNavigator({
Home: HomeScreen,
Settings: SettingsScreen,
});
const RootNav = createAppContainer(TabNavigator);
class RootScreen extends React.Component {
render() {
return (
<View style={{ flex: 1 }}>
<Head />
<RootNav />
</View>
);
}
}
export default RootScreen;
And a link to an Expo snack to preview: https://snack.expo.io/#bra/creatematerialtoptabnavigator-example
Related
In my project i did "handmade" tab bar without navigation.Firstly i preferred switch case, but now i understood, it cannot be without navigation.I want to change bottom tab navigation. Just i want to pass to other screens when i click bottom tabs but there is no function like "OnClick" in bottom tabs.My handmade router (App.js) menu takes some parameters something like that;
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import Login from './Login';
import Articles from './Articles';
import firebase from 'firebase';
import Loading from './Loading';
import Register from './Register';
import GotoSearch from './SearchItem';
import GiveDirection from './GiveDirection';
import Navigation from './Navigation';
class App extends Component {
constructor(props){
super(props);
this.setPage = this.setPage.bind(this);
this.setCurrentIndex = this.setCurrentIndex.bind(this);
this.setLastItem = this.setLastItem.bind(this);
this.state = { currentIndex: null, page: null, LastItem: {latitude : 0 , longitude : 0} };
}
state={
page:"login"
}
setPage(newpage) {
this.setState({page: newpage});
}
setCurrentIndex(id){
this.setState({currentIndex: id});
}
setLastItem(Item){
this.setState({LastItem:Item})
}
renderContent = () => {
switch (this.state.page) {
case "login":{
return <Login setPage={this.setPage}/>
}
case "articles":{
return <Articles
setPage={this.setPage}
setLastItem={this.setLastItem}
LastItem={this.state.LastItem}
/>
}
case "register":{
return <Register setPage={this.setPage}/>
}
case "gotosearch":{
return <GotoSearch
setPage={this.setPage}
currentIndex={this.state.currentIndex}
setCurrentIndex={this.setCurrentIndex} />
}
case "navigation":{
return <Navigation
setPage={this.setPage}
setLastItem={this.setLastItem}
LastItem={this.state.LastItem}
/>
}
case "givedirection":{
return <GiveDirection
setPage={this.setPage}
setLastItem={this.setLastItem}
LastItem={this.state.LastItem}
currentIndex={this.state.currentIndex}
setCurrentIndex={this.setCurrentIndex}
/>
}
default:
return <Loading />
}
}
I want to change from handmade menu to navigation menu
And this is the codes of the navigation menu I want to change
import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { NavigationContainer } from '#react-navigation/native';
class HomeScreen extends React.Component {
/*constructor(props) {
super(props);
}
componentDidMount=() => {
this.props.setPage("articles");
}
*/
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
}
class SearchScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Search!</Text>
</View>
);
}
}
class LogoutScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Logout!</Text>
</View>
);
}
}
class RouteScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Route!</Text>
</View>
);
}
}
const Tab = createBottomTabNavigator();
const Tabs = () => {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Main" component={HomeScreen} />
<Tab.Screen name="Search" component={SearchScreen} />
<Tab.Screen name="Logout" component={LogoutScreen} />
<Tab.Screen name="Route" component={RouteScreen} />
</Tab.Navigator>
</NavigationContainer>
)
}
export default Tabs;
i have small issue with below Code in Android As the Back Button of Device Make out of my Application , i surfed in the forum but i cant find the solution for that issue .
so how Handle This handle it inside my Code
Tab1.js File is below
import React from 'react';
import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
import { WebView } from 'react-native-webview';
import { Icon, Left, Right } from 'native-base';
export default class WebViewScreen extends React.Component {
buttonOnPress = () => {
console.warn('button Pressed')
}
constructor(props) {
super(props);
this.WEBVIEW_REF = React.createRef();
}
render() {
return (
<View style={styles.container}>
<Icon style={styles.Icon} onPress={() => this.WEBVIEW_REF.current.goBack()}>
<Text style={{textAlign: 'left', color: '#000000' }}></Text>
<Icon name="arrow-back" />
</Icon>
<WebView
source={{ uri: 'http://www.catalogmasr.com' }}
style={styles.webview}
ref={this.WEBVIEW_REF}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'stretch',
},
webview: {
flex: 1,
},
icon: {
padding : 2,
backgroundColor: '#cdcccc',
justifyContent: 'center',
alignItems: 'center'
}
});
All of the times I needed to handle the Back button at a Webview (or component), I needed to tell the component that my function was the correct handler/listener to the event.
componentDidMount() {
if (Platform.OS === 'android') {
BackHandler.addEventListener('hardwareBackPress', this.buttonOnPress );
} }
componentWillUnmount() {
if (Platform.OS === 'android') {
BackHandler.removeEventListener('hardwareBackPress');
} }
Best of luck, hope it fixes it for you.
I am starting with React-Native. I was able to see the <Text>. Then I progressed in adding my <TextInput>
import React from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';
export default class App extends Component {
state = {
placeName: ''
}
placeNameChangedHandler = event => {
alert(event)
}
render(){
return (
<View style={styles.container}>
<Text>Ayman</Text>
<TextInput
style={{width:300, borderColor:"black"}}
value={this.state.placeName}
onChangeText={this.placeNameChangedHandler}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
I am able to bundle my Javascript app, but the UI shows a blank screen.
Note that I'm a novice and I'm using expo on my phone for UI device.
Add borderWidth: 1 in TextInput styles and it will show the empty textinput.
I am very new to React Native, but I have successfully made a little app that just consists of 2 different screens using react-navigation library.
My problem is that my App wont load when I try to use the UI library UI-Kitten. I'm positive that there's not anything wrong with the library but rather with my code.
This is my App.js:
import React from 'react';
import { mapping, light as lightTheme } from '#eva-design/eva';
import { ApplicationProvider, Layout, Text, Button } from 'react-native-ui-kitten';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import { fadeIn, fromTop, fromBottom, zoomIn, zoomOut } from 'react-navigation-transitions';
class HomeScreen extends React.Component {
render() {
return (
<Layout style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
</Layout>
);
}
}
class DetailsScreen extends React.Component {
render() {
return (
<Layout style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'black' }}>
<Text style={{color: 'white'}}>Details Screen</Text>
<Button
title='Back home'
color='white'
onPress={() => this.props.navigation.navigate('Home')}
/>
</Layout>
);
}
}
const RootStack = createStackNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
title: 'Home',
header: null
},
},
Details: {
screen: DetailsScreen,
navigationOptions: {
title: 'Details',
header: null
},
},
},
{
initialRouteName: 'Home',
transitionConfig: () => zoomIn(),
}
);
const AppContainer = createAppContainer(RootStack);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
And this outputs this error when trying to launch:
https://pastebin.com/ygWFcgD0 (Long)
Thank you for ANY help or input on this problem!
You haven't configured the UI library correctly. The setup is outlined in the documentation.
Namely, see the mapping and theme props, as well the use of ApplicationProvider.
import React from 'react';
import { mapping, light as lightTheme } from '#eva-design/eva';
import { ApplicationProvider } from 'react-native-ui-kitten';
import { Application } from './path-to/application.component';
export default App = () => (
<ApplicationProvider
mapping={mapping}
theme={lightTheme}
<Application/>
</ApplicationProvider>
);
I have an error and really don't know why. It's a verry simple code juste for test react native, wanted to create a class who call an other class with and une a button to increment quantity :
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
TouchableHighlight,
Text,
View
} from 'react-native';
export default class Apprentissage1 extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcolm bitch
</Text>
<Product name="Product 1"/>
<Product name="Product 2"/>
</View>
);
}
}
class Product extends Component {
constructor(props) { //Constructeur
super(props);
this.state = {
quantity: 0
};
}
addToCart(){
this.setState({
quantity: this.state.quantity + 1
})
}
render(){
return(
<View style={styles.container}>
<h2>{this.props.name}</h2>
<p>Quantity: {this.state.quantity}</p>
<TouchableHighlight onPress={this.addToCart.bind(this)}>
Add To cart
</TouchableHighlight>
</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('Apprentissage1', () => Apprentissage1);
Thank's for your help :)
Replace your <h2> and <p> tags with React Native <View> component.
You cannot use DOM elements in your React Native application.
That's because you are using a non components elements like h2, p which are html elements and not react-native components.
Correct component to use for this is Text
then use Text for both h2 and p. just manipulate its fontSize to suit your needs.
<Text style={{ fontSize: 18 }}>{this.props.name}</Text>
<Text style={{ fontSize: 12}}>Quantity: {this.state.quantity}</Text>
Also ToucheableHighlight should contain a single element not a string.
<ToucheableHighlight
onPress={this.addToCart.bind(this)}
>
<Text>
Add to Cart
</Text>
</ToucheableHighlight>
I'm not sure where the error is getting triggered, but your onPress for the TouchableHighlight can just be () => { this.setState({quantity: this.state.quantity + 1}) } instead of this.bind.addToCart(this).
Separate the Product class to a new file then import it. React Native does not really like having multiple components in the same file.
Also how did you initialize the project? what is the error message?