Problem
I am creating a very simple app that will let users upload posts to firebase, and then the app will render all of the posts on firebase. When I added the FlatList code to render the posts on Firebase, I got an error (bottom of question). I would love help fixing this error, and I have no idea what caused it.
Code
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TextInput, ScrollView, TouchableHighlight, Button, FlatList } from 'react-native';
import { Font } from 'expo';
import * as firebase from 'firebase';
const firebaseConfig = {
apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXX",
authDomain: "candidtwo.firebaseapp.com",
databaseURL: "https://candidtwo.firebaseio.com",
storageBucket: "candidtwo.appspot.com",
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
var fontLoaded = false;
var ref = firebase.database().ref('posts');
var newPostRef = ref.push();
export default class App extends React.Component {
state = {
fontLoaded: false,
};
componentDidMount() {
Expo.Font.loadAsync({
'JosefinSans-Regular.ttf': require('./JosefinSans-Regular.ttf'),
});
}
constructor(props) {
super(props);
this.state = { postInput: ""}
}
render() {
return (
<View style={styles.container}>
<View style={styles.button}>
<View style={{width: 1, height: 30, backgroundColor: '#e8e8e8'}} />
<Button
onPress={() => this.setState({ fontLoaded: true })}
title="Press Me To Load the App After 15 Seconds!"
color="#fe8200"
accessibilityLabel="Wait 15 seconds and then press me to load the font!"
/>
</View>
{this.state.fontLoaded ? (
<View style={styles.container}>
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 16 }}>
Whats on your mind? Create a post!
</Text>
<TextInput
style={{height:40, width: 320, borderColor: '#303030', borderWidth: 1}}
onChangeText={(postInput)=>this.setState({postInput})}
value={this.state.postInput}
/>
<Button
onPress={() => {
newPostRef.set({ content:this.state.postInput });
this.setState({ postInput: "Your post was succsesfully uploaded! :)" })
}}
title=" + "
color="#fe8200"
/>
{/*var path = newPostRef.toString(); */}
<ScrollView>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 350, height: 250, backgroundColor: '#1daff1', alignItems: 'center', justifyContent: 'center', borderRadius: 10, paddingLeft: 10, paddingRight:10}} >
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', textAlign: 'center'}}>
Why do android phones have higher inital quality than apple phones, but apple phones have a more consistent amount of quality throughout their years?
</Text>
</View>
<View style={{width: 350, height: 40, borderRadius: 10, backgroundColor: '#147aa8', flexDirection: 'row',paddingLeft:5}} >
<Image source={require('./CandidtwoImages/unlove.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
3
</Text>
<Image source={require('./CandidtwoImages/undislike.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
1
</Text>
<Image source={require('./CandidtwoImages/comments.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
8
</Text>
</View>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 35, height: 25, backgroundColor: '#147c41', borderRadius: 10}} />
<View style={{width: 35, height: 4, backgroundColor: '#0f582d', borderRadius: 10}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 35, height: 25, backgroundColor: '#9dcd46', borderRadius: 10}} />
<View style={{width: 35, height: 4, backgroundColor: '#6c8f31', borderRadius: 10}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 35, height: 25, backgroundColor: '#d3832e', borderRadius: 10}} />
<View style={{width: 35, height: 4, backgroundColor: '#935b1e', borderRadius: 10}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<FlatList>
data={ref}
renderItem={
({item}) =>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
{/*Error happened here*/} <View style={{width: 350, height: 250, backgroundColor: '#1daff1', alignItems: 'center', justifyContent: 'center', borderRadius: 10, paddingLeft: 10, paddingRight:10}}>
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', textAlign: 'center'}}>
{item.content}
</Text>
</View>
<View style={{width: 350, height: 40, borderRadius: 10, backgroundColor: '#147aa8', flexDirection: 'row',paddingLeft:5}} >
<Image source={require('./CandidtwoImages/unlove.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
3
</Text>
<Image source={require('./CandidtwoImages/undislike.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
1
</Text>
<Image source={require('./CandidtwoImages/comments.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
8
</Text>
</View>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
</FlatList>
</ScrollView>
</View>) : (null) }
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 8,
backgroundColor: '#e8e8e8',
alignItems: 'center'
},
button: {
flex: 1,
backgroundColor: '#e8e8e8',
alignItems: 'center'
},
});
Error
unknown: Adjacent JSX elements must be wrapped in an enclosing tag(121:15)
The problem is, when rendering a component/group of for a FlatList, you need to enclose all components in that render with a parent View, hence 'wrapping them in an enclosing tag'. Whenever you have multiple Views next to eachother, you MUST enclose them in a parent View, take this as a rule of thumb moving forward. EG
<View>
<View />
<View />
</View>
Now for your problem, You are going to want to add a View here
({item}) =>
<View> //HERE
and then close it at the end. Also, you have not closed the opening FlatList component declaration, so this should be at the end of that part also. Your renderItem prop should now look like this
renderItem={
({item}) =>
<View>
<View style={{width: 350, height: 250, backgroundColor: '#1daff1', alignItems: 'center', justifyContent: 'center', borderRadius: 10, paddingLeft: 10, paddingRight:10}}>
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', textAlign: 'center'}}>
{item.content}
</Text>
</View>
<View style={{width: 350, height: 40, borderRadius: 10, backgroundColor: '#147aa8', flexDirection: 'row',paddingLeft:5}} >
<Image source={require('./CandidtwoImages/unlove.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
3
</Text>
<Image source={require('./CandidtwoImages/undislike.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
1
</Text>
<Image source={require('./CandidtwoImages/comments.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
8
</Text>
</View>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
</View>
}>
Note you should also do a majority of your styling in this parent view, but for now this solution should work. You will often see in tutorials styles.container, and this is usually what is ment, the container of all the sub-view components.
Related
How can i style to make both the buttons at the bottom of the screen and make a little gap between them and how can i make my profile image at the top of the screen and text below it like this image https://www.figma.com/file/BGDDg26x9Cl5AAOA2GGg52/Untitled?t=JCVgnCTjHVkRyhPX-0
i tried to style but something than the profile image and text gets hidden
import { StyleSheet, Text, View, Image } from 'react-native'
const App = () => {
return (
<View style={styles.container}>
<View style={styles.userSection}>
<View style={styles.imageContainer}>
<Image
style={styles.image}
source={('./img.jpg')
resizeMode="contain"
overflow="hidden"
/>
</View>
<Text style={styles.text}}>Text</Text>
</View>
})
}
<View style={styles.interacte}>
<Text style={formbtn}>Button 1</Text>
<Text style={formbtn}>Button 2</Text>
</View>
</View>
)
}
export default App
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black'
},
userSection: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 80
},
imageContainer: {
width: 150,
height: 150,
borderRadius: 80,
overflow: 'hidden',
marginRight: -160,
marginTop: -600
},
image: {
width: '100%',
height: '100%',
},
text: {
color: 'white',
fontSize: 20,
fontWeight: 'bold',
marginTop: -350,
},
interacte: {
marginTop: 500,
position: absolute,
}
});
App.js
import React from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
const App = () => {
return (
<View style={{ alignItems: 'center', justifyContent: 'center' }}>
<View style={{ marginTop: 10, marginBottom: 30 }}>
<Image
style={{ width: 100, height: 100, borderRadius: 20 }}
source={{
uri: 'https://cdn-icons-png.flaticon.com/128/919/919851.png',
}}
/>
</View>
<Text style={{ fontSize: 20, fontWeight: 'bold' }}>Welcome to world</Text>
<View style={{ marginTop: 300 }}>
<TouchableOpacity
style={{
width: 200,
height: 50,
backgroundColor: '#000',
alignItems: 'center',
justifyContent: 'center',
marginBottom: 10,
}}>
<Text style={{ color: 'white', fontSize: 20, fontWeight: 'bold' }}>
Sing In
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
width: 200,
height: 50,
backgroundColor: '#000',
alignItems: 'center',
justifyContent: 'center',
}}>
<Text style={{ color: 'white', fontSize: 20, fontWeight: 'bold' }}>
Sing Up
</Text>
</TouchableOpacity>
</View>
</View>
);
};
export default App;
output
Hope this will help you!!🐼
I'm making a system in which there is one horizontal ScrollView. But I don't know why, this scrollView doesn't work.
There is my code:
<ScrollView
pagingEnabled={true}
horizontal={true}
showsHorizontalScrollIndicator={false}
style={{
margin: 10,
}}
>
{brandName.map((element, index) => {
return (
<View
style={{
display: "flex",
flexDirection: "row",
margin: 10,
left: 10,
}}
>
<Text
style={{
borderRadius: 20,
borderColor: "#ff7b0d",
borderWidth: 1,
width: "55%",
height: "120%",
backgroundColor: "#ff7b0d",
color: "#fff",
textAlign: "center",
}}
>
{element}
</Text>
<TouchableOpacity>
<Text style={{right: 18}}>X</Text>
</TouchableOpacity>
</View>
);
})}
<View
style={{
display: "flex",
flexDirection: "row",
top: 5,
}}
>
<Text
style={{
paddingLeft: 10,
borderRadius: 20,
borderColor: "#ff7b0d",
borderWidth: 1,
backgroundColor: "#ff7b0d",
color: "#fff",
paddingHorizontal: 10,
paddingVertical: 3,
left: 10,
width: "60%",
height: "60%",
}}
>
Trie : {listOfSort}
</Text>
<TouchableOpacity>
<Text style={{paddingVertical: 3, right: 10}}>X</Text>
</TouchableOpacity>
</View>
</ScrollView>
I tried to remove and change some things but nothing change.
Could someone explain to me where the problem is?
Thanks you in advance I continue by my side!
You need to add a flex: 1 to the parent view of your elements. The following adjustment fixes your issue.
<ScrollView
pagingEnabled={true}
horizontal={true}
showsHorizontalScrollIndicator={false}
style={{
margin: 10,
}}
>
{brandName.map((element, index) => {
return (
<View
style={{
flex: 1,
flexDirection: "row",
margin: 10,
left: 10,
}}
>
<Text
style={{
borderRadius: 20,
borderColor: "#ff7b0d",
borderWidth: 1,
width: "55%",
height: "120%",
backgroundColor: "#ff7b0d",
color: "#fff",
textAlign: "center",
}}
>
{element}
</Text>
<TouchableOpacity>
<Text style={{right: 18}}>X</Text>
</TouchableOpacity>
</View>
);
})}
<View
style={{
flex: 1,
flexDirection: "row",
top: 5,
}}
>
<Text
style={{
paddingLeft: 10,
borderRadius: 20,
borderColor: "#ff7b0d",
borderWidth: 1,
backgroundColor: "#ff7b0d",
color: "#fff",
paddingHorizontal: 10,
paddingVertical: 3,
left: 10,
width: "60%",
height: "60%",
}}
>
Trie : {listOfSort}
</Text>
<TouchableOpacity>
<Text style={{paddingVertical: 3, right: 10}}>X</Text>
</TouchableOpacity>
</View>
</ScrollView>
So i wanted a login and register connected to my graphql api... I tried researching and i found some useful tutorials/videos and some websites that made it but it doesn't work or not compatible with the latest react-native most of the codes are deprecated and im just a beginner at react native... PLS HELP!!!
These are my researches...
https://www.youtube.com/watch?v=_kYUzNVyj-0
https://github.com/spencercarli/react-nativegraphql-auth-client
This one was the most useful tutorial i found but unfortunately, he made this code 4 years ago and most of the things there were old and i tried to find more like that but out of dumb luck i couldn't... If you guys could help me get some links that are compatible with the new react native or even your code i would be grateful.
BTW here is my login code:
import React from 'react';
import {
TextInput,
StyleSheet,
Text,
View,
TouchableOpacity,
Image,
} from 'react-native';
import logo from '../../assets/logo.png';
import CheckBOX from '../components/CheckBOX';
class Login extends React.Component {
render() {
return (
<View style={styles.container}>
<Image style={styles.logoimage} source={logo}></Image>
<Text style={styles.textHeader}>Log in!</Text>
<View style={styles.inputView}>
<TextInput
style={styles.inputText}
placeholder="Email Address"
placeholderTextColor="#8ACE54"
onChangeText={value => this.handleInputChange('email', value)}
/>
</View>
<View style={styles.inputView}>
<TextInput
secureTextEntry
style={styles.inputText}
placeholder="Password"
placeholderTextColor="#8ACE54"
onChangeText={value => this.handleInputChange('password', value)}
/>
</View>
<View style={{flexDirection: 'row'}}>
<CheckBOX />
<TouchableOpacity
onPress={() => this.props.navigation.navigate('ForgetPassword')}>
<Text style={styles.forgot}>Forgot your Password?</Text>
</TouchableOpacity>
</View>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('Home')}
style={styles.loginBtn}>
<Text style={styles.loginText}>LOGIN</Text>
</TouchableOpacity>
<View style={{flexDirection: 'row'}}>
<Text style={styles.signUpText2}>Not yet registered? </Text>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('Register')}>
<Text style={styles.signUpText}> Signup</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
export default Login;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
},
logoimage: {
height: 130,
width: 200,
marginBottom: 10,
},
textHeader: {
fontWeight: 'bold',
fontSize: 30,
color: '#8ACE54',
marginTop: 20,
marginBottom: 20,
},
inputView: {
width: '85%',
backgroundColor: 'white',
borderWidth: 1.5,
borderColor: '#8ACE54',
borderRadius: 50,
paddingVertical: 28,
borderRadius: 10,
height: 50,
marginBottom: 20,
justifyContent: 'center',
paddingHorizontal: 20,
},
inputText: {
height: 50,
fontSize: 17,
color: '#8ACE54',
},
forgot: {
color: '#8ACE54',
fontSize: 16,
fontWeight: '600',
marginLeft: 'auto',
},
loginBtn: {
width: '85%',
backgroundColor: '#8ACE54',
borderRadius: 10,
height: 50,
alignItems: 'center',
justifyContent: 'center',
marginTop: 20,
marginBottom: 10,
},
loginText: {
color: 'white',
fontWeight: '800',
textTransform: 'uppercase',
fontSize: 16,
},
signUpText: {
color: '#8ACE54',
fontWeight: '800',
textTransform: 'uppercase',
fontSize: 16,
},
signUpText2: {
fontWeight: '600',
textTransform: 'capitalize',
fontSize: 16,
},
});
And my register code:
import React from 'react';
import {
TextInput,
StyleSheet,
Text,
View,
TouchableOpacity,
Image,
} from 'react-native';
import logo from '../../assets/logo.png';
class Register extends React.Component {
render() {
return (
<View style={styles.container}>
<Image style={styles.logoimage} source={logo}></Image>
<Text style={styles.textHeader}>Register!</Text>
<View style={styles.inputView}>
<TextInput
style={styles.inputText}
placeholder="Username"
placeholderTextColor="#8ACE54"
/>
</View>
<View style={styles.inputView}>
<TextInput
style={styles.inputText}
placeholder="Email Address"
placeholderTextColor="#8ACE54"
/>
</View>
<View style={styles.inputView}>
<TextInput
style={styles.inputText}
placeholder="Mobile Number"
placeholderTextColor="#8ACE54"
/>
</View>
<View style={styles.inputView}>
<TextInput
secureTextEntry
style={styles.inputText}
placeholder="Password"
placeholderTextColor="#8ACE54"
/>
</View>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('Home')}
style={styles.loginBtn}>
<Text style={styles.loginText}>REGISTER</Text>
</TouchableOpacity>
<View style={{flexDirection: 'row'}}>
<Text style={styles.signUpText2}>Already have an account? </Text>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('Login')}>
<Text style={styles.signUpText}>Login</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
export default Register;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
},
logoimage: {
height: 130,
width: 200,
marginBottom: 10,
},
textHeader: {
fontWeight: 'bold',
fontSize: 30,
color: '#8ACE54',
marginTop: 20,
marginBottom: 20,
},
inputView: {
width: '85%',
backgroundColor: 'white',
borderWidth: 1.5,
borderColor: '#8ACE54',
borderRadius: 50,
paddingVertical: 28,
borderRadius: 10,
height: 50,
marginBottom: 20,
justifyContent: 'center',
paddingHorizontal: 20,
},
inputText: {
height: 50,
fontSize: 17,
color: '#8ACE54',
},
loginBtn: {
width: '85%',
backgroundColor: '#8ACE54',
borderRadius: 10,
height: 50,
alignItems: 'center',
justifyContent: 'center',
marginBottom: 10,
},
loginText: {
color: 'white',
fontWeight: '800',
textTransform: 'uppercase',
fontSize: 16,
},
signUpText: {
color: '#8ACE54',
fontWeight: '800',
textTransform: 'uppercase',
fontSize: 16,
},
signUpText2: {
fontWeight: '600',
textTransform: 'capitalize',
fontSize: 16,
},
signUpText2: {
fontWeight: '600',
textTransform: 'capitalize',
fontSize: 16,
},
});
If i didnt gave much information you can ask it on the comments and lets see if i can get it for you...
Thanks for your help in Advance!!!
I am attempting to replicate the following layout from instagram using react native in my own app:
Here is my code:
render() {
if (this.state.isLoading) {
return (
<View styles ={styles.container}>
<ActivityIndicator size="large" color="#9E9E9E" />
</View>
);
}
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.container}>
<Image
source={{ uri: this.state.oldProfilePic }}
style={styles.thumbnail}
/>
<TouchableOpacity
onPress={this.openImagePickerAsync}
style={styles.button}
>
<Text style={{ color: '#FFFFFF', fontWeight: 'bold', fontSize: 18 }}>change profile picture</Text>
</TouchableOpacity>
<View style= {{ flexDirection: 'row', justifyContent: 'space-between', padding: 20 }}>
<Text style={{ color: '#FFFFFF', fontWeight: 'bold', fontSize: 18, paddingTop: 5 }}>bio </Text>
<TextInput
style={styles.inputBox}
value={this.state.newBio}
onChangeText={newBio => this.setState({ newBio })}
placeholder={this.state.oldBio}
multiline
autoCapitalize="none"
placeholderTextColor="#696969"
/>
</View>
<View style ={{ flexDirection: 'row', justifyContent: 'space-between', padding: 20 }}>
<Text style={{ color: '#FFFFFF', fontWeight: 'bold', fontSize: 18, paddingTop: 7 }}>twitter </Text>
<TextInput
style={styles.socialInputBox}
value={this.state.twitter}
onChangeText={twitter => this.setState({ twitter })}
placeholder={this.state.twitter === null ? 'Enter Twitter username' : this.state.twitter}
autoCapitalize="none"
placeholderTextColor="#696969"
/>
</View>
<View style= {{ flexDirection: 'row', justifyContent: 'space-between', padding: 20 }}>
<Text style={{ color: '#FFFFFF', fontWeight: 'bold', fontSize: 18, paddingTop: 7 }}>instagram </Text>
<TextInput
style={styles.socialInputBox}
value={this.state.instagram}
onChangeText={instagram => this.setState({ instagram })}
placeholder={this.state.instagram === null ? 'Enter Instagram username' : this.state.instagram}
autoCapitalize="none"
placeholderTextColor="#696969"
/>
</View>
<TouchableOpacity
onPress={() => { this.saveChanges(); }}
style={styles.button}
>
<Text style={{ color: '#FFFFFF', fontWeight: 'bold', fontSize: 18 }}>save changes</Text>
</TouchableOpacity>
<KeyboardSpacer />
</View>
</TouchableWithoutFeedback>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
// justifyContent: 'space-between',
backgroundColor: '#121212',
},
inputBox: {
width: '85%',
// margin: 10,
padding: 15,
fontSize: 16,
borderColor: '#d3d3d3',
borderWidth: 1,
color: '#FFFFFF',
// textAlign: 'center'
},
thumbnail: {
width: 150,
height: 150,
borderRadius: 75,
marginTop: 40,
marginBottom: 30,
},
button: {
// marginTop: 10,
paddingVertical: 5,
alignItems: 'center',
backgroundColor: 'transparent',
borderColor: '#FFFFFF',
borderWidth: 1,
borderRadius: 5,
width: 200,
marginRight: 10,
marginLeft: 10,
marginBottom: 30,
},
socialInputBoxText: {
fontSize: 16,
fontWeight: 'bold',
marginTop: 10,
paddingTop: 15,
color: '#FFFFFF',
},
socialInputBox: {
width: '35%',
// marginTop: 10,
padding: 10,
fontSize: 14,
borderColor: '#d3d3d3',
borderWidth: 1,
textAlign: 'center',
color: '#FFFFFF',
},
});
And here is the result of my code:
As you can see, the instagram one is much neater. I am wondering how I can come closer to replicating the instagram layout in my own app. Thank you in advance!
there some issue while i try to push the TouchableOpacity button coz its not let me press it and also after i press it so i need to see the time picker and choose a time as i want and its shuold be display inside the square view in the middle.
what is the way to do it coz i got stacked right now.
I add picture of the screen :
import React, { useState } from 'react';
import { Text, View, Button, Platform, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createMaterialTopTabNavigator } from '#react-navigation/material-top-tabs';
import { useRoute, useNavigation } from '#react-navigation/native';
import DateTimePicker from '#react-native-community/datetimepicker';
import Icon from 'react-native-ionicons';
function NetuneyDigum() {
const [date, setDate] = useState(new Date());
const [mode, setMode] = useState('time');
const [show, setShow] = useState(false);
const onChange = (event, selectedDate) => {
setShow(Platform.OS === 'ios');
};
const showMode = (currentMode) => {
setShow(true);
setMode(currentMode);
};
const showTimepicker = () => {
showMode('time');
};
return (
<>
<View
style={{
flex: 1,
alignItems: 'center',
backgroundColor: '#cbced4',
}}
>
<View
style={{
paddingTop: 30,
flexDirection: 'row',
justifyContent: 'space-evenly',
paddingRight: 50,
right: 30,
}}
>
<View
style={{
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-evenly',
paddingRight: 10,
}}
>
<Text style={{ fontWeight: 'bold', fontSize: 18, color: 'black' }}>
THE TIME IS :
</Text>
</View>
<View
style={{
height: 50,
width: 100,
borderRadius: 5,
borderColor: 'black',
borderWidth: 2,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
// left: 40,
}}
>
<Text
style={{
fontSize: 20,
fontWeight: 'bold',
color: '#368fc7',
paddingLeft: 10,
}}
>
{show}
</Text>
<TouchableOpacity
onPress={showTimepicker}
style={{
height: 60,
width: 60,
borderRadius: 5,
borderColor: 'black',
borderWidth: 2,
left: 100,
justifyContent: 'center',
alignItems: 'center',
}}
>
<Icon name="md-time" size={50} color="black" />
</TouchableOpacity>
</View>
</View>
{show && (
<DateTimePicker
testID="dateTimePicker"
value={date}
mode={mode}
is24Hour={true}
display="default"
onChange={onChange}
/>
)}
</View>
</>
);
}
you wrong in TouchableOpacity position in code and bad way to styling , set left attribute to zero and move your TouchableOpacity outside of current parent
<View
style={{
paddingTop: 30,
flexDirection: 'row',
justifyContent: 'space-evenly',
paddingRight: 50,
right: 30,
}}
>
<View
style={{
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-evenly',
paddingRight: 10,
}}
>
<Text style={{ fontWeight: 'bold', fontSize: 18, color: 'black' }}>
THE TIME IS :
</Text>
</View>
<View
style={{
height: 50,
width: 100,
borderRadius: 5,
borderColor: 'black',
borderWidth: 2,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
// left: 40,
}}
>
<Text
style={{
fontSize: 20,
fontWeight: 'bold',
color: '#368fc7',
paddingLeft: 10,
}}
>
{show}
</Text>
</View>
//move touchable opacity here
<TouchableOpacity
onPress={showTimepicker}
style={{
height: 60,
width: 60,
borderRadius: 5,
borderColor: 'black',
borderWidth: 2,
//left: 100, remove this line
justifyContent: 'center',
alignItems: 'center',
}}
>
<Icon name="md-time" size={50} color="black" />
</TouchableOpacity>
</View>