Related
Hello there I am phasing an logic issue where I don't want my other useState render(run) whenever another state change their value because it render full component every time so it initialize default values.
here when useEffect run and it change item value by setitem but after component run again so it initialize default again
import React, { useState, useEffect, useRef, useLayoutEffect } from "react";
import {
Image,
StyleSheet,
TouchableOpacity,
Text,
View,
SafeAreaView,
FlatList,
TextInput,
} from "react-native";
import { EvilIcons } from "#expo/vector-icons";
import { MaterialCommunityIcons, Ionicons } from "#expo/vector-icons";
import axios from "axios";
import { AsyncStorage } from "react-native";
import url from "../url";
const Handlenewspost = ({ navigation }) => {
var items = navigation.getParam("item");
var user = navigation.getParam("user");
var functionforoffset = navigation.getParam("functionforoffset");
const [item, setitem] = useState(items);
var like = item.like;
var found = like.find((element) => {
if (element.username === user.username) return true;
});
found ? (item.userlike = true) : false;
var checklike = "";
item.userlike ? (checklike = "heart") : (checklike = "heart-outline");
item.userlike ? (checkcolor = "red") : (checkcolor = "black");
const [likebutton, setlikebutton] = useState(checklike);
const [postlikes, setpostlikes] = useState(item.likes);
const [likebuttoncolor, setlikebuttoncolor] = useState(checkcolor);
useEffect(() => {
axios
.get(url + "post/byid/" + items._id)
.then((response) => {
setitem(response.data);
})
.catch((err) => {
console.log(err);
console.log(err.response.data.error);
Alert.alert("Something went wrong", err.response.data.error, [
{ text: "OK", onPress: () => console.log("OK Pressed") },
]);
});
}, []);
const onpresshandle = async (item) => {
userToken = await AsyncStorage.getItem("userToken");
id = item._id;
token = userToken;
functionforoffset();
axios
.post(url + "post/like", { token, id })
.then((response) => {
if (!response.data) {
} else {
}
})
.catch((err) => {
console.log(err);
console.log(err.response.data.error);
Alert.alert("Something went wrong", err.response.data.error, [
{ text: "OK", onPress: () => console.log("OK Pressed") },
]);
});
};
function checkcaption(caption) {
if (caption != "") {
return (
<SafeAreaView style={styles.safe}>
<View
style={[
styles.root,
{ flexDirection: "row", alignItems: "center" },
]}
>
<Text style={[styles.textStyle, { fontSize: 15, marginLeft: 0 }]}>
{item.caption}
</Text>
</View>
</SafeAreaView>
);
} else {
return <View></View>;
}
}
return (
<>
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.container}>
<View style={styles.card}>
<View style={styles.cardheader}>
{item.profileimage ? (
<Image
source={{ uri: url + "filename/" + item.profileimage }}
style={{
marginLeft: 16,
marginRight: 8,
height: 40,
width: 40,
borderRadius: 100,
}}
></Image>
) : (
<Image
source={require("../../assets/localbazilogo2.jpeg")}
style={[
styles.profileimage,
{ marginLeft: 16, marginRight: 5 },
]}
></Image>
)}
<Text style={{ fontWeight: "bold", fontSize: 15, marginLeft: 5 }}>
{item.username}
</Text>
</View>
<View style={styles.cardbody}>
{item.filename ? (
<Image
style={styles.cardbodyimage}
resizeMode="stretch"
source={{ uri: url + "filename/" + item.filename }}
></Image>
) : (
<View></View>
)}
</View>
<View style={styles.cardfooter}>
<MaterialCommunityIcons
onPress={() => {
if (item.userlike) {
setlikebutton("heart-outline");
setlikebuttoncolor("black");
setpostlikes(postlikes - 1);
} else {
setlikebutton("heart");
setlikebuttoncolor("red");
setpostlikes(postlikes + 1);
}
item.userlike = !item.userlike;
onpresshandle(item);
}}
name={likebutton}
size={28}
color={likebuttoncolor}
style={{ marginLeft: 10, marginTop: 4 }}
>
{" "}
</MaterialCommunityIcons>
<Text style={{ fontSize: 18, marginLeft: 1 }}>{postlikes}</Text>
<EvilIcons
name="comment"
size={30}
style={{ marginLeft: 20, marginTop: 4 }}
color="black"
/>
<Image
style={{ marginLeft: 20, marginTop: 4 }}
source={require("../../assets/share.png")}
></Image>
</View>
{checkcaption(item.caption)}
<View style={styles.showcomment}>
<Text>
View all {item.comments ? item.comments.length : 0} comments
</Text>
</View>
<View style={styles.comment}>
<View>
{user.profileimage ? (
<Image
source={{ uri: url + "filename/" + user.profileimage }}
style={{
height: 35,
width: 35,
borderRadius: 100,
marginLeft: 14,
}}
></Image>
) : (
<View></View>
)}
</View>
<View style={styles.addcomment}>
<Text
style={{
marginHorizontal: 5,
fontSize: 14,
color: "#9CA3AF",
width: 240,
}}
>
Add Comment
</Text>
</View>
</View>
</View>
</View>
</SafeAreaView>
</>
);
};
export default Handlenewspost;
const styles = StyleSheet.create({
showcomment: { marginLeft: 20, marginBottom: 5 },
addcomment: {
overflow: "hidden",
marginLeft: 20,
marginRight: 20,
padding: 7,
backgroundColor: "#E6E7E9",
borderRadius: 25,
},
comment: {
marginTop: 10,
flexDirection: "row",
alignItems: "center",
},
email: {
flexDirection: "row",
overflow: "hidden",
marginLeft: 20,
marginRight: 20,
marginTop: 10,
marginBottom: 20,
padding: 7,
backgroundColor: "#E6E7E9",
borderRadius: 25,
},
iconout: { width: "20%", alignItems: "center" },
icon: { height: 35, width: 35, resizeMode: "stretch" },
icons: {
flexDirection: "row",
flexWrap: "wrap",
marginTop: 1,
marginHorizontal: 28,
marginBottom: 20,
},
profileimage: {
width: "12%",
height: "170%",
borderRadius: 100,
resizeMode: "stretch",
},
safe: {
flex: 1,
marginTop: -10,
},
root: {
flex: 1,
padding: 16,
},
textStyle: {
fontSize: 14,
},
container: {
justifyContent: "center",
flex: 1,
},
cardfooter: {
flexDirection: "row",
alignItems: "center",
},
cardbodyimage: {
height: 350,
width: "100%",
marginTop: 3,
borderRadius: 3,
},
cardbody: {},
cardheader: {
flexDirection: "row",
alignItems: "center",
marginVertical: 12,
},
card: {
marginVertical: 10,
marginHorizontal: 4,
},
});
i want to center my view at the center of the screen but its unable am using justifyContent: 'center',
alignItems: 'center', but its all unable to put the contents at the middle of the screen i want the content to go to middle of the screen
i want the buttons and the inputs all to be at the middle of the screen .
i have tried to align but its unable to
import React, {useState, useEffect, useContext} from 'react';
import UserContext from './useContextStore';
import {
Text,
View,
Button,
TextInput,
StyleSheet,
TouchableOpacity,
Platform,
} from 'react-native';
import AsyncStorage from '#react-native-async-storage/async-storage';
import auth from '#react-native-firebase/auth';
import DataViewDoc from './view';
const PhoneInput = ({navigation}) => {
const [number, setNumber] = useState({number: ''});
const [value, loadedVal] = useState({value: true});
const [screenDaetail, setScreenDaetail] = useState(true);
const [waiting, setwaiting] = useState(false);
const [code, setCode] = useState({code: '', number: ''});
const [confirm, setConfirm] = useState(null);
const [codee, setCodee] = useState('');
// let num;
const getNumber = (val) => {
setNumber({number: val});
};
const getCode = (val) => {
setCode({code: val, number: number.number});
};
//firebase**************************************************************************
async function signInWithPhoneNumber(phoneNumber) {
const confirmation = await auth().signInWithPhoneNumber(phoneNumber);
console.log('confirmation code is ', confirmation);
setConfirm(confirmation);
}
async function confirmCode() {
try {
await confirm.confirm(codee).then(() => {
console.log('logged in');
// setScreenDaetail(!screenDaetail);
navigation.navigate('codeForma');
});
} catch (error) {
console.log('Invalid code.');
}
}
return (
<View styles={style.container}>
{confirm ? (
<>
<View styles={style.content}>
<Text style={style.TextStyle1}>Enter Valid Code </Text>
</View>
<View style={style.viewForText}>
<TextInput
style={style.textinput}
onChangeText={(text) => setCodee(text)}
secureTextEntry={true}
maxLength={13}
value={codee}
/>
</View>
<View style={style.viewForSend}>
<TouchableOpacity
style={style.SubmitButtonStyle}
activeOpacity={0.1}
onPress={() => {
// sendPhoneCodeTwillio();
confirmCode();
}}>
<Text style={style.TextStyle}> SEND</Text>
</TouchableOpacity>
<TouchableOpacity
style={style.SubmitButtonStyle2}
activeOpacity={0.1}
onPress={() => {
// sendPhoneTwilio();
setConfirm(null);
}}>
<Text style={style.TextStyle}> Back </Text>
</TouchableOpacity>
</View>
</>
) : (
<>
<View styles={style.content}>
<Text style={style.TextStyle1}>Enter Phone number </Text>
</View>
<View style={style.viewForText}>
<TextInput
style={style.textinput}
onChangeText={(text) => {
getNumber(text);
}}
maxLength={13}
value={number.number}
/>
</View>
<View style={style.viewForSend}>
<TouchableOpacity
style={style.SubmitButtonStyle}
activeOpacity={0.1}
onPress={() => {
signInWithPhoneNumber(number.number);
}}>
<Text style={style.TextStyle}> SEND </Text>
</TouchableOpacity>
<TouchableOpacity
style={style.SubmitButtonStyle2}
activeOpacity={0.1}
onPress={() => {
signInWithPhoneNumber(number.number);
}}>
<Text style={style.TextStyle}> RESEND </Text>
</TouchableOpacity>
</View>
</>
)}
</View>
);
};
const style = StyleSheet.create({
container: {
flex: 1,
// paddingBottom: Platform.OS === 'android' ? 50 : 0,
justifyContent: 'center',
alignItems: 'center',
},
textinput: {
margin: 25,
borderColor: '#7a42f4',
borderWidth: 5,
borderRadius: 35,
color: 'black',
textAlign: 'center',
fontFamily: 'Cochin',
fontSize: 20,
fontWeight: 'bold',
},
viewForText: {width: 250, alignSelf: 'center'},
viewForSend: {
width: 400,
// alignSelf: 'baseline',
borderRadius: 20,
margin: 10,
flexDirection: 'row',
justifyContent: 'center',
alignSelf: 'center',
},
content: {
// justifyContent: 'center',
// // alignItems: 'flex-start',
flex: 2,
justifyContent: 'flex-end',
marginBottom: 36,
},
topTierblack: {
backgroundColor: 'black',
borderRadius: 100,
width: 300,
marginLeft: 40,
opacity: 0.5,
},
topTierRed: {
backgroundColor: 'red',
borderRadius: 100,
width: 300,
marginLeft: 40,
},
topTierGreen: {
backgroundColor: 'green',
borderRadius: 100,
width: 300,
marginLeft: 40,
opacity: 0.5,
},
viewForSend2: {
width: 200,
alignSelf: 'flex-end',
borderRadius: 20,
// margin: 10,
},
buttonContainer: {
width: '40%',
alignSelf: 'center',
marginVertical: 30,
color: 'red',
borderRadius: 10,
},
SubmitButtonStyle: {
marginTop: 10,
paddingTop: 15,
paddingBottom: 15,
marginLeft: 30,
marginRight: 30,
backgroundColor: '#00BCD4',
borderRadius: 10,
borderWidth: 1,
borderColor: '#fff',
shadowOpacity: 0.5,
shadowColor: 'blue',
height: 50,
width: 100,
},
SubmitButtonStyle2: {
marginTop: 10,
paddingTop: 15,
paddingBottom: 15,
marginLeft: 30,
marginRight: 30,
backgroundColor: 'black',
borderRadius: 10,
borderWidth: 1,
borderColor: '#fff',
shadowOpacity: 0.5,
shadowColor: 'blue',
height: 50,
width: 100,
},
TextStyle: {
color: '#fff',
textAlign: 'center',
},
TextStyle1: {
color: 'black',
textAlign: 'center',
fontFamily: 'Cochin',
fontSize: 20,
fontWeight: 'bold',
},
});
export default PhoneInput;
Remove the marginRight from SubmitButtonStyle and the marginLeft from SubmitButtonStyle2 and you should be fine.
I would like my page to scroll up so that the user can correctly type its email and password. Therefore, I am using KeyboardAvoidingView.
However, when I use it, it shrinks my textinput picture instead of moving up the page. Without the keyboard my app looks like this picture.
My code following for this page :
export default class LoginScreen extends React.Component {
constructor(props) {
super(props)
}
state = {
email: '',
password: ''
}
handleEmail = (text) => {
this.setState({ email: text })
}
handlePassword = (text) => {
this.setState({ password: text })
}
render() {
return (
<View style={styles.container}>
<ImageBackground source={require('../pics/main.png')} style={styles.background}>
<KeyboardAvoidingView behavior="padding" style={{ flex: 1}} >
<Text style={styles.title2}>WELCOME</Text>
<TextInput
style={styles.inputEmail}
placeholder="Enter Email"
onChangeText={this.handleEmail}
/>
<TextInput
style={[styles.inputEmail, styles.inputPassword]}
placeholder="Enter password"
onChangeText={this.handlePassword}
/>
<View style={styles.buttons}>
<TouchableOpacity style={styles.login} onPress={() => this.props.navigation.navigate('MainScreen')} >
<Text style={styles.loginText}>LOGIN</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.login} onPress={() => this.props.navigation.navigate('SignUpScreen')}>
<Text style={styles.loginText}>SIGN UP</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</ImageBackground>
</View>
);
}
}
const styles = StyleSheet.create({
area: {
flex: 1
},
container: {
flex: 1,
},
background: {
flex: 1,
resizeMode: "cover",
width: '100%',
height: '100%'
},
title2: {
paddingTop: 10,
color: color.primary,
fontSize: 25,
alignSelf: 'center',
justifyContent: 'flex-start'
},
inputEmail: {
borderWidth: 2,
borderColor: color.primary,
borderRadius: 10,
width: '50%',
height: '5%',
marginTop: 100,
alignSelf: 'center',
backgroundColor: color.secondary
},
inputPassword: {
marginTop: 10
},
buttons: {
flexDirection: 'row',
justifyContent: 'space-around',
marginTop: 30,
marginLeft: 70,
marginRight: 70,
},
login: {
borderColor: color.primary,
borderRadius: 20,
borderWidth: 2,
width: '40%',
height: '118%',
backgroundColor: color.primary
},
loginText: {
alignSelf: 'center',
marginTop: 5,
marginBottom: 1,
color: 'white'
}
});
Any idea on what I am doing wrong ?
UPDATE : to avoid shrinking put the text input container width and height not as a percentage but as real numbers : inputEmail --> width: 200, height: 35,
Here is a solution with your code, I have fixed this in this snack with your provided code.
Expo Snack with CSS fixes to avoid keyboard
I have a View (containing an Icon and Text, to act as a big checkbox) which is placed above a ScrollView, however, the ScrollView is appearing in front of the View, and also the Text isn't displaying.
I've tried every combination of flex, sometimes ending up with both of them taking up half the screen.
The Icon/Text works fine on other screens.
this shows the view behind the scrollview, rather than neatly above it, with some margin.
this is what it looks like on another screen, fine with margins, etc.
export default StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
marginTop: 20,
marginBottom: 20,
backgroundColor: 'white',
},
scrollview: {
width: '100%',
paddingTop: 10,
paddingBottom: 10,
},
heading: {
fontSize: 36,
textAlign: 'center',
marginLeft: 20,
marginRight: 20,
},
subheading: {
fontSize: 20,
textAlign: 'center',
marginLeft: 20,
marginRight: 20,
},
});```
<View style={ style.container }>
<Text style={ style.heading }>{ this.state.list && this.state.list.name || 'My Gift List' }</Text>
{ this.state.list.date ? <Text style={ [ style.subheading, { marginTop: 5, marginBottom: 10 } ] }>{ formatDate( dateFromIso( this.state.list.date ), "%A %eth %B, %Y" ) }</Text> : null }
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginTop: 10, marginBottom: 20 }}>
<Checkbox icon={ this.state.showTicked ? 'check' : null } onPress={ () => this.setState( { showTicked: ! this.state.showTicked } ) } />
<Text style={{ marginLeft: 10 }} onPress={ () => this.setState( { multiple: ! this.state.multiple } ) }>I would like more than one</Text>
</View>
{
this.state.list.items.length > 0 ?
<ScrollView style={ style.scrollview } >
<FlatList style={ { marginTop: 10, marginBottom: 50, width: "100%", borderTopColor: '#ddd', borderTopWidth: 1 } } data={ this.state.list.items } renderItem={ this.renderItem } />
</ScrollView>
: null
}
</View>```
const Checkbox = args => {
const props = Object.assign( {}, args );
props.containerStyle = Object.assign( { width: 40 }, props.containerStyle || {} );
props.buttonStyle = Object.assign( { backgroundColor: 'transparent', borderWidth: 1, borderColor: '#555', height: 40 }, props.buttonStyle || {} );
if ( props.icon )
{
let iconProps = Object.assign( { type: 'font-awesome', name: props.icon , color: "#555555", size: 20 }, props.iconStyle || {} );;
props.icon = <RNEIcon {...iconProps} />
}
return <RNEButton {...props} />
};
I think You just need to change the z index for the scroll view and the regular view in the style sheet
export default StyleSheet.create({
container: {
zIndex: 2,
flex: 1,
alignItems: 'center',
marginTop: 20,
marginBottom: 20,
backgroundColor: 'white',
},
scrollview: {
zIndex: 1,
width: '100%',
paddingTop: 10,
paddingBottom: 10,
},
heading: {
fontSize: 36,
textAlign: 'center',
marginLeft: 20,
marginRight: 20,
},
subheading: {
fontSize: 20,
textAlign: 'center',
marginLeft: 20,
marginRight: 20,
},
});```
When I scroll vertically up and down, animation starts lagging in the first two components (CompetitionsList, CampList) after the slider (BannerSwiper). I couldn’t fix it. I tried using Animation.ScrollView with "UseNativeDriver: true", but it didn’t help. Something might be wrong with css.
Here is a gif of screen:
https://i.yapx.ru/DT9CR.gif
This is my code:
export default class HomeComponent extends React.Component {
render() {
return (
<View style={styles.container}>
<ScrollView >
<BannerSwiper/>
<CompetitionsList home={true} {...this.props}/>
<CustomDivider/>
<CampList home={true} {...this.props}/>
<CustomDivider/>
<NewsComponent home={true} {...this.props}/>
<CustomDivider/>
<AthletesBirthdayList {...this.props}/>
<CustomDivider/>
<RatingsBlock/>
<CustomDivider/>
<SocialBlock/>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f2f2f2',
}
});
export default class CompetitionsList extends React.Component {
...
render() {
const {
compListForHome
} = this.props.competitions;
return (
<View style={styles.homeContainer}>
<View style={styles.headerContainer}>
<Text style={[styles.header, {marginRight: 'auto'}]}>СОРЕВНОВАНИЯ</Text>
<Text
style={[styles.header, {marginLeft: 'auto', color: '#2f95dc'}]}
onPress={() => this.props.routing('navigate', 'Competitions')}
>ВСЕ</Text>
</View>
<View style={{alignItems: 'center'}}>
<View style={styles.contentContainer}>
<ScrollView
style={{flex: 1}}
horizontal={true}
showsHorizontalScrollIndicator={false}>
<AnimatedComponent>
<View style={styles.cardContainer}>
<View style={styles.cardWrapper}>
{
compListForHome.map(event =>
<TouchableWithoutFeedback key={event.id} onPress={() => console.log(event.id)}>
<Card
containerStyle={styles.cardWidth}
title={
<View style={styles.cardTitleStyleContainer}>
<Text numberOfLines={1} style={styles.cardTitleStyleText}>{event.name}</Text>
</View>
}
imageStyle={styles.image}
image={event.URL_logo? {uri: event.URL_logo} : SP_IMAGE}>
<View style={styles.cardLabeledContainer}>
<Text style={styles.cardTextLabeled} numberOfLines={1}>{dateFormatter(event.start_date)}</Text>
<Text style={styles.cardTextLabeled} numberOfLines={1}>{dateFormatter(event.end_date)}</Text>
</View>
<Text style={styles.cardText} numberOfLines={1}>{getFullCourseNameByCode(event.course)}</Text>
<Text style={styles.cardText} numberOfLines={1}>{getFullCompetitionStatusByCode(event.status)}</Text>
{
event.reg_status
? <Text style={styles.cardText} numberOfLines={1}>Регистрация: {getFullRegistrationStatusByCode(event.reg_status)}</Text>
: null
}
</Card>
</TouchableWithoutFeedback>
)
}
</View>
</View>
</AnimatedComponent>
</ScrollView>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
spinContainer: {
height: 50
},
overlay: {
flex: 1,
position: 'absolute',
bottom: 10,
width: SCREEN_WIDTH,
justifyContent: 'center',
alignItems: 'center'
},
filterBtn: {
backgroundColor: '#2f95dc',
alignSelf: 'center'
},
homeContainer: {
flex: 1,
marginHorizontal: 50
},
fullListContainer: {
flex:1
},
headerContainer: {
flex: 1,
flexDirection: 'row',
width: SCREEN_WIDTH-80
},
header: {
fontSize: 17,
color: 'rgba(96,100,109, 1)',
lineHeight: 24,
marginTop: 15
},
contentContainer: {
flex: 1,
marginTop: 10,
width: SCREEN_WIDTH
},
cardContainer: {
flex: 1,
flexDirection: 'column',
marginRight: 10
},
cardWrapper: {
flex: 1,
flexDirection: 'row'
},
cardTitleStyleContainer: {
padding: 20,
marginBottom: 15,
borderTopStartRadius: 5,
borderTopEndRadius: 5,
backgroundColor: "#2f95dc",
alignItems: 'center'
},
cardTitleStyleText: {
fontSize: 16,
lineHeight: 24,
color: '#fff',
fontWeight: 'bold'
},
cardWidth: {
width: 250,
height: 360,
borderWidth: 1,
borderRadius: 6,
borderColor: '#ddd',
shadowColor: '#000',
shadowOffset: { width: 5, height: 5 },
shadowOpacity: 0.8,
shadowRadius: 5,
elevation: 4,
marginBottom: 7
},
image: {
width: 100,
height: 100,
borderRadius: 100,
overflow: 'hidden',
alignSelf: 'center'
},
cardText: {
color: 'rgba(96,100,109, 0.8)',
fontSize: 14,
lineHeight: 14,
alignSelf: 'center',
marginBottom: 10
},
cardLabeledContainer: {
backgroundColor: 'rgba(0,0,0,0.05)',
borderRadius: 3,
marginTop: 10,
marginBottom: 20,
marginHorizontal: 30,
padding: 5
},
cardTextLabeled: {
alignSelf: 'center',
fontSize: 15,
color: 'rgba(96,100,109, 0.8)'
}
});
Thank you for your help!