I was trying to implement the react-native navigation and I got the error "Looks like you have nested a 'Navigation Container' inside another..."
The Error Image for the First One
So I tried to fix it by putting independent={true} but it just quits the app and does not load. So I removed the NavigationContainer and I get the error "Couldn't register the navigator. Have you wrapped your app with 'Navigation Container'?"
The Error Image for the Second One
My Code is at the end of this question. The Navigation Container is at the end of the code.
How do I fix it? If somebody could help it would really help thanks in advance.
<View style={{backgroundColor: '#010101'}}>
<Header />
<View>
<Text style={{fontSize: 40, fontWeight: 'bold', marginLeft: 15, color: 'white'}}>Chats</Text>
</View>
<View style={styles.thirdSec}>
<View>
<Text style={styles.textLeft}>Broadcast List</Text>
</View>
<View>
<Text style={styles.textRight}>New Group</Text>
</View>
</View>
<View
style={{
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
}}
/>
<ScrollView>
<ChatList />
<View
style={{
marginTop: 5,
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
marginHorizontal: 30
}}
/>
<ChatList />
<View
style={{
marginTop: 5,
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
marginHorizontal: 30
}}
/>
<ChatList />
<View
style={{
marginTop: 5,
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
marginHorizontal: 30
}}
/>
<ChatList />
<View
style={{
marginTop: 5,
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
marginHorizontal: 30
}}
/>
<ChatList />
<View
style={{
marginTop: 5,
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
marginHorizontal: 30
}}
/>
<ChatList />
<View
style={{
marginTop: 5,
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
marginHorizontal: 30
}}
/>
</ScrollView>
<NavigationContainer>
<Tabs.Navigator>
<Tabs.Screen name="Chats" component={Home} />
</Tabs.Navigator>
</NavigationContainer>
</View>
I think this is what you want.
import * as React from 'react';
import { Text, View, ScrollView } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { Header } from 'react-native-elements';
import ChatList from './ChatList';
function Home() {
return (
<View style={{backgroundColor: '#010101'}}>
<Header
leftComponent={{ icon: 'menu', color: '#fff', iconStyle: { color: '#fff' } }}
centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
rightComponent={{ icon: 'home', color: '#fff' }}
/>
<View>
<Text style={{fontSize: 40, fontWeight: 'bold', marginLeft: 15, color: 'white'}}>Chats</Text>
</View>
<View>
<View>
<Text>Broadcast List</Text>
</View>
<View>
<Text>New Group</Text>
</View>
</View>
<View
style={{
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
}}
/>
<ScrollView>
<ChatList />
<View
style={{
marginTop: 5,
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
marginHorizontal: 30
}}
/>
<ChatList />
<View
style={{
marginTop: 5,
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
marginHorizontal: 30
}}
/>
<ChatList />
<View
style={{
marginTop: 5,
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
marginHorizontal: 30
}}
/>
<ChatList />
<View
style={{
marginTop: 5,
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
marginHorizontal: 30
}}
/>
<ChatList />
<View
style={{
marginTop: 5,
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
marginHorizontal: 30
}}
/>
<ChatList />
<View
style={{
marginTop: 5,
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
marginHorizontal: 30
}}
/>
</ScrollView>
</View>
);
}
const Tabs = createBottomTabNavigator();
function MyTabs() {
return (
<Tabs.Navigator>
<Tabs.Screen name="Chats" component={Home} />
</Tabs.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}
Take a look at this snack:
https://snack.expo.dev/#devsaeedhabibi/navigationcontainer
If this answer does not help,
Please provide more complete information about what you want.
Please check the React Navigation document:
https://reactnavigation.org/docs/navigation-container/
Related
Images show fine in the iOS simulator but when I open the android simulator.. everything gets mixed up.. what should I do to solve this issue? I honestly don't know how to fix this. so please if there's anyone that can solve this.. would really appreciate it.
So this is the Android emulator. I don't know why the image is like this.
this is on iOS simulator, and how it must be.
Home.js
import React from "react";
import {
View,
Text,
Button,
SafeAreaView,
TextInput,
StatusBar,
Platform,
ScrollView,
Image,
imageUri,
StyleSheet,
} from "react-native";
import { MaterialCommunityIcons } from "#expo/vector-icons";
import ProductsList from "../../components/productsList/ProductsList";
import Icon from "react-native-vector-icons/Ionicons";
import { fontSize } from "styled-system";
import Location from "../components/Location";
export default function Search({ navigation }) {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<View
style={{
height: 80,
backgroundColor: "white",
borderBottomWidth: 1,
borderBottomColor: "#dddddd",
}}
>
<View
style={{
flexDirection: "row",
padding: 10,
backgroundColor: "white",
marginHorizontal: 20,
shadowOffset: { width: 0, height: 0 },
shadowColor: "black",
shadowOpacity: 0.2,
borderRadius: 50,
elevation: 1,
}}
>
<Icon name="ios-search" size={20} style={{ marginRight: 10 }} />
<TextInput
underlineColorAndroid="transparent"
placeholder="City, airport, adrerss, or hotel"
placeholderTextColor="grey"
style={{ flex: 1, fontWeight: "700", backgroundColor: "white" }}
/>
</View>
</View>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
scrollEventThrottle={16}
>
<View style={{ height: 180, width: 50 }}>
<Image source={require("../home/homepage.jpeg")} />
</View>
</ScrollView>
<ScrollView scrollEventThrottle={16}>
<View style={{ flex: 1, backgroundColor: "white", paddingTop: 20 }}>
<Text
style={{
alignItems: "center",
fontSize: 24,
fontWeight: "700",
paddingHorizontal: 20,
marginLeft: 100,
borderColor: "grey",
height: 50,
width: 230,
shadowOpacity: 0.5,
borderWidth: 0.5,
paddingTop: 10,
backgroundColor: "lightblue",
}}
>
FIND YOUR RIDE
</Text>
<View style={{ height: 130, marginTop: 20 }}>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
>
<Location
imageUri={require("../home/nicosia.jpg")}
name="Nicosia"
/>
<Location
imageUri={require("../home/kyrenia.jpg")}
name="Kyrenia"
/>
<Location
imageUri={require("../home/famagusta.jpg")}
name="Famagusta"
/>
<Location
imageUri={require("../home/lefke.png")}
name="Lefke"
/>
</ScrollView>
</View>
<View style={{ marginTop: 40, paddingHorizontal: 20 }}>
<View>
<Text
style={{
fontSize: 24,
fontWeight: "700",
paddingLeft: 40,
}}
>
<View>
<MaterialCommunityIcons
name="face-agent"
size={30}
style={{ paddingLeft: 10, color: "lightblue" }}
/>
</View>
24/7 customer support
</Text>
<Text
style={{ paddingLeft: 80, marginTop: 20, marginBottom: 25 }}
>
{
"Rest easy knowing that everyone in \nthe Rent in cars community is screened, \nand 24/7 customer support and \nroadside assistant are just a tap away."
}
</Text>
</View>
<View>
<Text
style={{
fontSize: 24,
fontWeight: "700",
paddingLeft: 40,
}}
>
<View>
<MaterialCommunityIcons
name="car"
size={30}
style={{
paddingLeft: 10,
color: "lightblue",
marginTop: 20,
}}
/>
</View>
Endless options
</Text>
<Text
style={{ paddingLeft: 80, marginTop: 20, marginBottom: 25 }}
>
{
"Choose from hundreds of models\nyou won't find anywhere else. Pick it \nup or get it delivered where you \nwant it."
}
</Text>
</View>
<View>
<Text
style={{
fontSize: 24,
fontWeight: "700",
paddingLeft: 40,
}}
>
<View>
<MaterialCommunityIcons
name="security"
size={30}
style={{ paddingLeft: 10, color: "lightblue" }}
/>
</View>
Drive confidently
</Text>
<Text style={{ paddingLeft: 80, marginTop: 20 }}>
{
"Drive confidently with your choice \nof protection plans - all plans \ninclude varying levels of third party \nliability insurance from Liberty \nMutual and physical damage \nprotection from Rent in Car that caps\nyour out of pocket responsibility for \ndamage to your host's car during \nyour trip."
}
</Text>
</View>
</View>
</View>
</ScrollView>
</View>
</SafeAreaView>
);
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
red: {
color: "red",
},
});
}
Define width and height and resizeMode :
<View style={{width:"100%", height:180}}>
<Image
style={{
width: "100%",
height: 180
}}
resizeMode="cover"
source={require("../home/homepage.jpeg")}
/>
/>
I'm having some troubles trying to figure out how to edit a text thats already been made.
I have done most of the things and the one i'm stuck at is the button that updates the text to the new updated text. I can see the updated text when I use console.log but it doesn't update the text. Thats still the same. Below you can see the full code and I think the updateTodo function is done wrong.
export default function App() {
const [updateTaskId, setUpdateTaskId] = useState('');
const [updateTaskTitle, setUpdateTaskTitle] = useState('');
const [todos, setTodos] = useState([]);
const updateTodo = () => {
const todoAsync = [
...todos,
{
key: updateTaskId,
name: updateTaskTitle,
},
];
setTodos(todoAsync);
};
const renderitem = ({item}) => {
return (
<View
style={{
flex: 1,
backgroundColor: colors.card,
margin: 10,
elevation: 1,
borderRadius: 10,
padding: 10,
}}>
<View style={{flexDirection: 'row'}}>
<Fontisto
name={item.isChecked ? 'checkbox-active' : 'checkbox-passive'}
size={20}
color={colors.text}
onPress={() => checkTodo(item.key)}
/>
<TouchableOpacity
onLongPress={() => {
setUpdateModal(true);
setUpdateTaskTitle(item.name);
}}>
<Text
style={{
color: colors.text,
marginLeft: 20,
marginRight: 20,
}}>
{item.name}
</Text>
</TouchableOpacity>
</View>
<View style={{flexDirection: 'row', marginTop: 10}}>
<Fontisto name="date" size={20} color={colors.text} />
<Text style={{marginLeft: 20, color: colors.text}}>{item.date}</Text>
</View>
<View
style={{
marginTop: 10,
flexDirection: 'row',
justifyContent: 'space-between',
}}>
<Feather
name={item.notification ? 'bell-off' : 'bell'}
size={20}
color={colors.text}
onPress={() => checkNotification(item.key)}
/>
<Fontisto
name="trash"
size={20}
color={colors.text}
onPress={() => {
setModalVisible(true);
setDetails(item);
}}
/>
</View>
</View>
);
};
return (
<View style={{flex: 1, backgroundColor: colors.background}}>
<Modal
hardwareAccelerated={true}
animationType="fade"
transparent={true}
visible={updateModal}
onRequestClose={() => {
setUpdateModal(!updateModal);
}}>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0.8)',
}}>
<View
style={{
backgroundColor: colors.Modal,
padding: 35,
borderRadius: 10,
width: '80%',
height: '40%',
}}>
<View style={{}}>
<TextInput
style={{backgroundColor: colors.background, marginTop: 10}}
onChangeText={name => setUpdateTaskTitle(name)}
value={updateTaskTitle}
/>
</View>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-evenly',
marginTop: 50,
}}>
<TouchableOpacity
onPress={() => {
setUpdateModal(false);
setUpdateTaskTitle('');
}}>
<Text>Close</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
setUpdateModal(false);
updateTodo(...todos, {name: updateTaskTitle});
setUpdateTaskTitle('');
console.log(updateTaskTitle);
}}>
<Text>Update</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
<Modal
hardwareAccelerated={true}
animationType="fade"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0.8)',
}}>
<View
style={{
backgroundColor: colors.Modal,
padding: 35,
borderRadius: 10,
width: '80%',
height: '40%',
}}>
<View>
<Text style={{fontSize: 20, color: colors.text}}>Delete?</Text>
</View>
<View
style={{
flexDirection: 'row',
marginTop: 15,
}}>
<Text style={{color: colors.text}}>Completed: </Text>
<Fontisto
style={{marginLeft: 20}}
name={
details.isChecked ? 'checkbox-active' : 'checkbox-passive'
}
size={15}
color={colors.text}
/>
</View>
<View style={{flexDirection: 'row', marginTop: 20}}>
<Text style={{color: colors.text}}>Title: </Text>
<Text
numberOfLines={1}
style={{marginLeft: 15, marginRight: 15, color: colors.text}}>
{details.name}
</Text>
</View>
<Text style={{marginTop: 20, color: colors.text}}>
Created: {details.date}
</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-evenly',
marginTop: 30,
}}>
<TouchableOpacity
onPress={() => {
setModalVisible(false);
setDetails('');
}}>
<Text style={{color: colors.text}}>Close</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
deleteTodo(details.key);
setModalVisible(false);
setDetails('');
}}>
<Text style={{color: colors.text}}>Delete</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
padding: 20,
backgroundColor: colors.Textinput,
elevation: 12,
}}>
<TextInput
style={{
flex: 1,
backgroundColor: '#fff',
borderTopLeftRadius: 5,
borderBottomLeftRadius: 5,
}}
placeholder="What Tododay?"
placeholderTextColor="#000"
onChangeText={value => setTitle(value)}
value={title}
autoCapitalize="words"
/>
<Entypo
style={{
marginLeft: 1,
padding: 13,
backgroundColor: '#fff',
height: 49,
borderTopRightRadius: 5,
borderBottomRightRadius: 5,
}}
name="add-to-list"
size={25}
color="#000"
onPress={() => addTodo()}
/>
</View>
<View style={{flex: 1}}>
<FlatList
data={todos}
renderItem={renderitem}
ListEmptyComponent={emptyListComponent}
/>
</View>
</View>
);
}
Here is what you need to do.
make a copy of all todos
filter out the todo that you are about to update out of the todos array
concat a new todo with the new text to the array of todos
it should render as expected
const updateTodo = () => {
const todoAsync = [
...todos,
].filter((item) => item.id !== updateTaskId).concat([{
key: updateTaskId,
name: updateTaskTitle,
}])
setTodos(todoAsync);
};
Try this if you want to keep the same todo on the screen but only update the object key for name.
const updateTodo = () => {
const todoAsync = [
...todos,
].map((item) => {
const { key } = item;
if(key === updateTaskId} {
// return updated object
return {
key,
name: updateTaskTitle,
}
}
else return item;
}
setTodos(todoAsync);
};
I have a sign-up screen "Inputs", I want when user select input doesn't hide other, so I wrap it inside <KeyboardAvoidingView> and set behavior "padding" but after choosing some input I see a View cover all my content so I can't see any things "just white View"
So maybe I made something wrong when using it, how can I handle it?
ScreenShot
here's my code
<KeyboardAvoidingView
behavior="padding"
keyboardVerticalOffset={Platform.select({
ios: () => 0,
android: () => 200,
})()}>
<ScrollView>
<View style={styles.imgContainer}>
<Image
style={styles.imgStyle}
resizeMode="cover"
source={require('../../assets/Logo.png')}
/>
</View>
<View>
<View style={styles.inputContainer}>
<Icon
style={styles.iconStyle}
name="md-person"
size={20}
color="#ddf"
/>
<TextInput
onChangeText={value => this.setState({userName: value})}
value={userName}
style={styles.inputStyle}
placeholder="Name"
/>
</View>
<View
style={{
marginTop: 0,
marginLeft: 16,
marginBottom: 0,
}}>
<Text>{this.state.NameValid}</Text>
</View>
<View style={styles.inputContainer}>
<Icon
style={styles.iconStyle}
name="md-at"
size={20}
color="#ddf"
/>
<TextInput
onChangeText={value => this.setState({email: value})}
value={email}
style={styles.inputStyle}
placeholder="Email"
keyboardType="email-address"
/>
</View>
<View
style={{
marginTop: 0,
marginLeft: 16,
marginBottom: 0,
}}>
<Text>{this.state.emailValid}</Text>
</View>
<View style={styles.inputContainer}>
<Icon
style={styles.iconStyle}
name="md-call"
size={20}
color="#ddf"
/>
<TextInput
style={styles.inputStyle}
placeholder="mobile"
onChangeText={value => this.setState({phoneNumber: value})}
value={phoneNumber}
keyboardType="phone-pad"
/>
</View>
<View
style={{
marginTop: 0,
marginLeft: 16,
marginBottom: 0,
}}>
<Text>{this.state.phoneValid}</Text>
</View>
<View style={{...styles.inputContainer, marginBottom: 0}}>
<Icon
style={styles.iconStyle}
name="md-lock"
size={20}
color="#ddf"
/>
<TextInput
secureTextEntry
style={styles.inputStyle}
placeholder="Password"
value={password}
onChangeText={value => this.setState({password: value})}
/>
</View>
<View
style={{
marginTop: 0,
marginLeft: 16,
marginBottom: 0,
}}>
<Text>{this.state.passwordValid}</Text>
</View>
</View>
<View style={styles.buttonsContainer}>
<TouchableOpacity
onPress={() => this.signUp()}
style={styles.btnStyle}>
<Text style={[styles.textStyle, {color: '#fff', fontSize: 20}]}>
Sign Up
</Text>
</TouchableOpacity>
<View style={styles.textContainer}>
<Text style={[styles.textStyle, {opacity: 0.7}]}>
Do you have account?
</Text>
<TouchableOpacity onPress={() => navigation.navigate('SignIn')}>
<Text style={styles.textStyle}> sign In </Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
</KeyboardAvoidingView>
Style
const styles = StyleSheet.create({
container: {
flex: 1,
},
imgContainer: {alignItems: 'center', marginVertical: 25},
imgStyle: {width: 250, height: 150},
inputContainer: {
margin: 15,
marginBottom: 20,
borderWidth: 1,
borderColor: '#ddd',
borderRadius: 30,
flexDirection: 'row',
alignItems: 'center',
},
iconStyle: {
marginLeft: 15,
},
inputStyle: {
padding: 10,
width: '85%',
textAlign: I18nManager.isRTL ? 'right' : 'left',
},
buttonsContainer: {
margin: 15,
marginBottom: 20,
justifyContent: 'flex-end',
},
btnStyle: {
backgroundColor: '#1E558E',
alignItems: 'center',
justifyContent: 'center',
padding: 15,
borderRadius: 30,
},
textContainer: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
padding: 25,
},
textStyle: {color: '#1E558E', fontSize: 17},
});
I want to map through an array, that may contain even or odd number of elements, and I want to show 2 records per row in my react native component, <Viewstyle={{flexDirection: 'row',height: 180,width: '83.33%',
alignSelf: 'center', justifyContent: 'center'}}></View> please how can I map through the array by 2 records, not just one record
This is what I've tried so far
const goods = (
<FlatList
data={this.state.goods}
renderItem={({ item }) => (
<TouchableNativeFeedback
onPress={() =>
this.props.navigation.navigate('ProductDetail', {name: item.name,
amount: item.amount,
description: item.description,
images: item.images,
qty: item.quantity,
id: item.id}
)}>
<View style={{flexDirection: 'row',height: 180,width: '83.33%',
alignSelf: 'center', justifyContent: 'center'}}>
<TouchableNativeFeedback onPress={() =>
this.props.navigation.navigate('ProductDetail', {})}>
<View style={{flex: 1, flexDirection: 'column',justifyContent: 'space-evenly'}}>
<View style={{height: Height*(17.19/100),
width: Width*(40/100),
marginRight: 10,
borderTopRightRadius: 6,
borderTopLeftRadius: 6,
borderBottomLeftRadius: 6,
borderBottomRightRadius: 6,
backgroundColor: '#FAFAFA',
borderWidth: 0.4,
borderColor: '#DADADA',
elevation: 0}}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('../headset.png')}/>
</View>
<View style={{flexDirection: 'column'}}>
<Text style={{fontFamily: 'mont-semi',fontSize: 12,color: '#615d5d',
paddingLeft: 10}}>
Headset
</Text>
<Text style={{fontFamily: 'mont-medium',color: '#615d5d',fontSize: 8
,paddingLeft: 10}}>
₦230,000.00
</Text>
</View>
</View></TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() =>
this.props.navigation.navigate('ProductDetail', {})}>
<View style={{height:180, flexDirection: 'column', justifyContent: 'space-evenly'}}>
<View style={{height: Height*(17.19/100),
width: Width*(40/100),
marginRight: 10,
borderTopRightRadius: 6,
borderTopLeftRadius: 6,
borderBottomLeftRadius: 6,
borderBottomRightRadius: 6,
backgroundColor: '#FAFAFA',
borderWidth: 0.4,
borderColor: '#DADADA',
elevation: 0}}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('../case_.png')}/>
</View>
<View style={{flexDirection: 'column'}}>
<Text style={{fontFamily: 'mont-semi',fontSize: 12,color: '#615d5d',
paddingLeft: 10}}>
Headset
</Text>
<Text style={{fontFamily: 'mont-medium',color: '#615d5d',fontSize: 8
,paddingLeft: 10}}>
₦230,000.00
</Text>
</View>
</View></TouchableNativeFeedback>
</View>
</TouchableNativeFeedback>
)}
keyExtractor={item => item.id}
horizontal={true}
/> );
Below is how I want the data to be rendered, 2 records per row, I read through array reduce docs but I doubt if it will work for this situation
<View style={{flex: 1,
flexDirection: 'column'}}>
<View style={{flexDirection: 'row',height: 180,width: '83.33%',
alignSelf: 'center', justifyContent: 'center'}}>
<TouchableNativeFeedback onPress={() =>
this.props.navigation.navigate('ProductDetail', {})}>
<View style={{flex: 1, flexDirection: 'column',justifyContent: 'space-evenly'}}>
<View style={{height: Height*(17.19/100),
width: Width*(40/100),
marginRight: 10,
borderTopRightRadius: 6,
borderTopLeftRadius: 6,
borderBottomLeftRadius: 6,
borderBottomRightRadius: 6,
backgroundColor: '#FAFAFA',
borderWidth: 0.4,
borderColor: '#DADADA',
elevation: 0}}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('../headset.png')}/>
</View>
<View style={{flexDirection: 'column'}}>
<Text style={{fontFamily: 'mont-semi',fontSize: 12,color: '#615d5d',
paddingLeft: 10}}>
Headset
</Text>
<Text style={{fontFamily: 'mont-medium',color: '#615d5d',fontSize: 8
,paddingLeft: 10}}>
₦230,000.00
</Text>
</View>
</View></TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() =>
this.props.navigation.navigate('ProductDetail', {})}>
<View style={{height:180, flexDirection: 'column', justifyContent: 'space-evenly'}}>
<View style={{height: Height*(17.19/100),
width: Width*(40/100),
marginRight: 10,
borderTopRightRadius: 6,
borderTopLeftRadius: 6,
borderBottomLeftRadius: 6,
borderBottomRightRadius: 6,
backgroundColor: '#FAFAFA',
borderWidth: 0.4,
borderColor: '#DADADA',
elevation: 0}}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('../case_.png')}/>
</View>
<View style={{flexDirection: 'column'}}>
<Text style={{fontFamily: 'mont-semi',fontSize: 12,color: '#615d5d',
paddingLeft: 10}}>
Headset
</Text>
<Text style={{fontFamily: 'mont-medium',color: '#615d5d',fontSize: 8
,paddingLeft: 10}}>
₦230,000.00
</Text>
</View>
</View></TouchableNativeFeedback>
</View>
</View>
You can set numColumns property to 2 of FlatList to display 2 columns per row. Take a look at the document. Also note, you should set horizontal={false}
Hope this will help!
you need to define numColumns in flatlist, something like this
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, FlatList, Image, TouchableOpacity, Dimensions, TouchableNativeFeedback } from 'react-native';
export default class Test extends Component {
constructor() {
super();
this.state = {
data : [
{uri : 'https://uploads.siteduzero.com/files/6001_7000/6410.jpg'},
{uri : 'https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/pluto_color_mapmosaic.jpg'},
{uri : 'https://www.w3schools.com/Css/paris.jpg'},
{uri : 'https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/pia21975-opt.jpg'},
]
}
}
_renderItem = ({item}) => {
console.log(item.uri)
return (
<View style={{flexDirection:'row' ,flex:1,borderWidth:4,borderColor:'white'}}>
<Image style={{width:Dimensions.get('window').width/2 , height:100}} resizeMode="cover" source={{uri : item.uri}} />
</View>
)
}
_keyExtractor = (item, index) => item.uri.toString();
render() {
return (
<FlatList
numColumns={2}
data={this.state.data}
extraData={this.state}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
)
}
}
I have a component that is navigated to from the drawer menu,the name of the component is Servicecategory, now I want to navigate to a another component from this Servicecategory, The name of this component is Home, this Home component conatains a view pager, I want to navigate to home component and change the view pager to a specific page on navigate from ServiceCategory i.e this.setpage(0), is this possible, this is my code below
SERVICECATEGORY
import { connect } from "react-redux";
import { trueBrowse,trueCart, trueHome, trueMessages, trueServices,falseBrowse,
falseCart, falseHome,falseMessages, falseServices} from "../actions/index";
const mapStateToProps = state => {
return { home: state.home, browse: state.browse,cart: state.cart, messages: state.messages };
};
const mapDispatchToProps = dispatch => {
return {
trueBrowse: browse => dispatch(trueBrowse(browse)),
trueServices: services => dispatch(trueServices(services)),
trueHome: home => dispatch(trueHome(home)),
trueMessages: messages => dispatch(trueMessages(messages)),
trueCart: cart => dispatch(trueCart(cart)),
falseServices: services => dispatch(falseServices(services)),
falseMessages: messages => dispatch(falseMessages(messages)),
falseHome: home => dispatch(falseHome(home)),
falseCart: cart => dispatch(falseCart(cart)),
falseBrowse: browse => dispatch(falseBrowse(browse))
};
};
class reduxServicesCategory extends Component {
static navigationOptions = {
header: null,
drawerLockMode: 'locked-closed'
};
stateChanger() {
this.props.trueHome("home");
this.props.falseMessages("messages");
this.props.falseBrowse("soo");
this.props.falseCart("cart");
this.props.trueServices("services");
//ON navigate to Land, I want to change the view of the view pager, that is currently in land
this.props.navigation.navigate('Land');
}
constructor(props) {
super(props);
this.state = {
search: false
};
}
showSearch(){
this.setState({search: true},);
};
render(){
return(
<View style={styles.container}>
<View style={{flexDirection: 'row',height: 80,backgroundColor: '#fcfcfc',
marginBottom: 15,
justifyContent: 'center',width: '100%',alignItems: 'center' }}>
<TouchableNativeFeedback onPress={() => this.props.navigation.goBack(null)}>
<MaterialCommunityIcons style={{position: 'absolute',left: 10,top: StatusBar.currentHeight
}} name="arrow-left" size={30} color="#535461"/>
</TouchableNativeFeedback>
{this.state.search?
<TextInput
autoFocus={true}
ref="search"
placeholder="Search..."
returnKeyType={'search'}
placeholderStyle={{fontSize: 20, fontFamily: 'mont-semi',}}
placeholderTextColor="#000"
underlineColorAndroid={'transparent'}
style={{
position: 'absolute',top: StatusBar.currentHeight-5,
backgroundColor: '#fcfcfc',width: '65%',alignSelf: 'center',
fontSize: 20, fontFamily: 'mont-medium', color: '#000',
}}/>:<Text style={{fontFamily: 'mont-semi',
fontSize: 20,
color: '#000',}}>
Service Category
</Text>}
{this.state.search?
<TouchableNativeFeedback onPress={() => this.setState({search: false})}>
<MaterialIcons style={{position: 'absolute',right: 10,
top: StatusBar.currentHeight
}} name="cancel" size={30} color="#535461"/>
</TouchableNativeFeedback>:
<TouchableNativeFeedback onPress={this.showSearch.bind(this)}>
<MaterialIcons style={{position: 'absolute',right: 10,
top: StatusBar.currentHeight
}} name="search" size={30} color="#535461"/>
</TouchableNativeFeedback>}
</View>
<ScrollView>
<View style={{flexDirection: 'row',marginBottom: 25,
justifyContent: 'space-evenly'}}>
<TouchableNativeFeedback
onPress={this.stateChanger.bind(this)}>
<View style={styles.cats}>
<View style={styles.icon}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('../makeup_icon.png')}/>
</View>
<Text style={styles.iconDes}>
{'\n'}MAKEUP ARTIST
</Text>
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback
onPress={this.stateChanger.bind(this)}>
<View style={styles.cats}>
<View style={styles.icon}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('../makeup_icon.png')}/>
</View>
<Text style={styles.iconDes}>
{'\n'}MAKEUP ARTIST
</Text>
</View>
</TouchableNativeFeedback>
</View>
LANDCOMPONENT(HOME)
<ViewPagerAndroid style={{flex: 1}} initialPage={0}
onPageSelected={this.onPageSelected.bind(this)}
ref={(viewPager) => {
this.viewPager = viewPager
}}>
<View style={{flex: 1}} key="1">
{this.props.services ?
<View style={{
width: '100%',
marginTop: 10,
}}>
<Services navigation={this.props.navigation}/>
</View>
<View style={{flex: 1}} key="2">
<Messages/>
</View>
<View style={{flex: 1}} key="3">
<Browse navigation={this.props.navigation}/>
</View>
APP.JS(Drawer)
const screens = createStackNavigator({
Home: {
screen: ServiceDetail,
},
Signup: {
screen: Signup
},
Login: {
screen: Login
},
Land: {
screen: Home,
},
Find: {
screen: Find
},
Shop: {
screen: Shop
},
SetCat: {
screen: ServicesCategory
},
ServiceProfile: {
screen: ServiceProfile
},
ServiceDetail: {
screen: On,
},
JobBid: {
screen: JobBid
}
});
const RootStack = DrawerNavigator(
{
drawer: {
screen: screens
}
},
{
drawerWidth: Width * (80 / 100),
contentComponent: (props) => (
<View style={{flex: 1, backgroundColor: '#fcfcfc'}}>
<LinearGradient colors={['#EE8F62', '#f2ac88']}
style={{width: '100%', height: 190}}>
<View style={{
flex: 1, flexDirection: 'row', alignItems: 'center',
paddingTop: 20, justifyContent: 'center', alignContent: 'center'
}}>
<View style={{
width: 150, height: 150,
borderRadius: 150 / 2,
}}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('./profile.png')}/>
</View>
<View style={{flexDirection: 'column', marginBottom: 13}}>
<Text style={{fontFamily: 'mont-semi', color: '#fff', fontSize: 20}}>
Jane Doe</Text>
<Text style={{fontFamily: 'mont', color: '#fcfcfc', fontSize: 18, marginTop: 10}}>
Profile</Text>
</View>
</View>
</LinearGradient>
<View style={{flex: 1, backgroundColor: '#fcfcfc'}}>
<TouchableNativeFeedback onPress={() =>
props.navigation.navigate('Shop', {})}>
<View style={{
height: 60,
width: '100%',
backgroundColor: '#fcfcfc',
flexDirection: 'row',
paddingLeft: 20,
paddingRight: 10,
paddingTop: 10,
alignItems: 'center',
alignContent: 'center',
justifyContent: 'center'
}}>
<View style={{
flexDirection: 'row', height: 40,
width: '100%', backgroundColor: '#f2f2f2', borderRadius: 3,
alignItems: 'center', paddingLeft: 10
}}>
<View style={{height: 21, width: 23}}><Image
resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('./cart.jpg')}/></View>
<Text style={{
marginLeft: 23, fontFamily: 'mont-medium', fontSize: 14
, color: '#F3B690'
}}>Shop by Category</Text>
</View>
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() =>
props.navigation.navigate('SetCat', {})}>
<View style={{
height: 60, width: '100%', backgroundColor: '#fcfcfc',
flexDirection: 'row', paddingLeft: 20, paddingTop: 10
}}>
<View style={{height: 23, width: 23}}><Image
resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('./recruitment.jpg')}/></View>
<Text style={{
marginLeft: 23, fontFamily: 'mont-medium', fontSize: 14
, color: '#615D5D'
}}>Sẹlẹ Services</Text>
</View>
</TouchableNativeFeedback>
<View style={{
height: 60, width: '100%', backgroundColor: '#fcfcfc',
flexDirection: 'row', paddingLeft: 20, paddingTop: 10
}}>
<View style={{height: 23, width: 23}}><Image
resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('./payment-method.png')}/></View>
<Text style={{
marginLeft: 23, fontFamily: 'mont-medium', fontSize: 14
, color: '#615D5D'
}}>Sell on Sẹlẹ</Text>
</View>
<TouchableNativeFeedback onPress={() =>
props.navigation.navigate('Login', {})}>
<View style={{
height: 60, width: '100%', backgroundColor: '#fcfcfc',
flexDirection: 'row', paddingLeft: 20, paddingTop: 10
}}>
<View style={{height: 21, width: 23}}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('./account.jpg')}/></View>
<Text style={{
marginLeft: 23, fontFamily: 'mont-medium', fontSize: 14
, color: '#615D5D'
}}>My Account</Text>
</View></TouchableNativeFeedback>
</View>
</View>
)
},
{
initialRouteName: 'Home',
}
, {}
);
I think you should use componentDidUpdate
Like this
componentDidUpdate(){
if(this.props.home && this.props.services){
this.viewPager.setPage(0);
}
}