Keyboard doesn´t appears while i'm using TextInput react native - react-native

import React from "react";
import { StyleSheet,Text,Image,TextInput,TouchableOpacity, View, Dimensions } from 'react-native';
var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;
export default function login() {
return (
<View style={styles.container}>
<Image source={require('../components/assets/login/logo.jpg')} style={styles.logo} />
<TextInput style={styles.ButtonEmail} placeholder='Email' />
<TextInput style={styles.ButtonPassword} placeholder='Password'/>
<View style={styles.forgotContainer}>
<TouchableOpacity>
<Text style={styles.forgotText}>Esqueceu-se da senha?</Text>
</TouchableOpacity>
</View>
<TouchableOpacity style={styles.ButtonLogin}>
<Text style={styles.loginText}>Login</Text>
</TouchableOpacity>
<View style={styles.divisor}>
<View style={styles.divisorLine}></View>
<Text style={{marginHorizontal: '3%'}}>OU</Text>
<View style={styles.divisorLine}></View>
</View>
<TouchableOpacity style={styles.ButtonGoogle}>
<Text style={styles.GoogleText}>Login com a conta Google</Text>
</TouchableOpacity>
<Image source={require('../components/assets/login/google.jpg')} style={styles.logoGoogle} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
logo: {
width: 200,
height: 200,
position: 'relative',
top: height*0.17,
},
ButtonEmail: {
position: 'absolute',
top: height*0.35,
height: height*0.08,
width: width*0.85,
borderRadius: 50,
padding: 20,
backgroundColor: '#D6ECF3',
},
ButtonPassword: {
position: 'absolute',
top: height*0.45,
height: height*0.08,
width: width*0.85,
borderRadius: 50,
padding: 20,
backgroundColor: '#D6ECF3',
},
forgotContainer: {
position: 'absolute',
left: width*0.55,
top: height*0.55,
},
forgotText: {
color: '#399fff',
},
ButtonLogin: {
position: 'absolute',
top: height*0.63,
height: height*0.08,
width: width*0.425,
borderRadius: 50,
padding: 20,
backgroundColor: '#399fff',
},
loginText: {
textAlign: 'center',
color: 'white',
},
divisor: {
position: 'absolute',
top: height* 0.75,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
divisorLine: {
width: width*0.3,
height: height*0.005,
borderRadius: 5,
backgroundColor: '#EFEDED',
},
ButtonGoogle: {
position: 'absolute',
top: height*0.8,
height: height*0.08,
width: width*0.77,
borderRadius: 50,
padding: 20,
paddingRight: 50,
backgroundColor: '#399fff',
},
GoogleText: {
textAlign: 'center',
color: 'white',
},
logoGoogle: {
position: 'absolute',
top: height*0.82,
left: width* 0.72,
height: 30,
width: 28,
}
});

Related

react native why my absolute view is not showing all only the half?

why my purple absolute view is not showing all, only the half ?
look at the image
Code:
CardView:
const { width } = Dimensions.get('window');
const MAX_NAME_WIDTH = width / 2 - 48;
const CARD_WIDTH = width * 0.45;
const UserCardAdvanced = ({ user_id, username, profile_image, followingShops, is_verification, isD, stars, onPress, onPressReviews, onPressFollow }: IUserCardAdvanced) => {
return (
<Pressable onPress={onPress} style={s.card}>
{ isD &&
<PurpleNotice />
}
<Image source={{uri: profile_image}} resizeMode='contain' style={s.profile_image} />
<View style={s.starContainer}>
<Stars
star_filled={stars?.fill}
disabled
is_all
size={15}
onPressAll={onPressReviews}
/>
<Text style={s.reviewTotal}>{stars?.total_reviews}</Text>
</View>
<View style={s.nameContainer}>
<NameWithVerification
name={username}
is_verification={is_verification}
nameStyle={s.nameStyle}
/>
</View>
<FollowBtn
onPress={onPressFollow}
is_followed={false}
size={24}
/>
</Pressable>
)
}
const s = StyleSheet.create({
card: {
padding: 12,
backgroundColor: '#fff',
borderRadius: 8,
elevation: 3,
margin: 6,
justifyContent: 'center',
alignItems: 'center',
marginBottom: 20,
zIndex: 99921,
width: CARD_WIDTH
},
starContainer: {
flexDirection: 'row',
alignItems: 'center',
marginTop: 8
},
reviewTotal: {
fontFamily: globalStyles.font_regular,
color: '#333',
marginLeft: 4
},
nameContainer: {
marginVertical: 8
},
nameStyle: {
color: '#333',
fontSize: 13,
maxWidth: MAX_NAME_WIDTH
},
profile_image: {
height: 84,
width: 84,
borderRadius: 50,
},
username: {
fontFamily: globalStyles.font_regular,
color: '#555',
marginTop: 12,
textAlign: 'center'
}
})
Purple Notice
const PurpleNotice = (isD: isD) => {
return (
<View style={s.view}>
<Text style={s.text}>TESTTESTETS</Text>
</View>
)
}
const s = StyleSheet.create({
view: {
padding: 2,
paddingHorizontal: 10,
backgroundColor: globalStyles.globalColor,
borderRadius: 6,
position: 'absolute',
top: -10,
left: 0,
zIndex: 99999
},
text: {
fontFamily: globalStyles.font_light,
color: '#fff',
fontSize: 11,
textTransform: 'uppercase',
textShadowColor: '#fff',
textShadowOffset: {
height: 2,
width: 2
}
}
});
I dont know what I am doing wrong i am very thankful for your help!!
.........................................
.........................................
.........................................
.........................................
.........................................
You can add zIndex={1} to that purple view.
use right:0 in style
const s = StyleSheet.create({
view: {
padding: 2,
paddingHorizontal: 10,
backgroundColor: globalStyles.globalColor,
borderRadius: 6,
position: 'absolute',
top: -10,
left: 0,
right:0, //use this also
zIndex: 99999
},
text: {
fontFamily: globalStyles.font_light,
color: '#fff',
fontSize: 11,
textTransform: 'uppercase',
textShadowColor: '#fff',
textShadowOffset: {
height: 2,
width: 2
}
}
});

Trying to set Opacity for Modal , Dim Background

I am having issues with the opacity. Trying to have it a bit dim when the Modal is triggered, it dims the background with some form of Opacity and all. How can I dim the background when the modal is triggered?
The image is looking thus :
Here is my source code
import {
ImageBackground,
Modal,
ScrollView,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from 'react-native';
import {Picker} from '#react-native-picker/picker';
import React, {useState} from 'react';
import {useNavigation} from '#react-navigation/native';
const LocalPayments = () => {
const navigation = useNavigation();
const [modalVisible, setModalVisible] = useState(false);
return (
<View style={styles.container}>
<View style={styles.space} />
<ScrollView
contentContainerStyle={{
justifyContent: 'space-between',
alignItems: 'center',
}}>
<ImageBackground
source={{
uri: 'asset:/logo/bg.JPG',
}}
imageStyle={{borderRadius: 6}}
style={{
top: -30,
paddingTop: 95,
alignSelf: 'center',
width: 328,
height: 115,
borderadius: 9,
justifyContent: 'center',
alignSelf: 'center',
alignItems: 'center',
}}>
<View>
<Text style={styles.accText}>Wallet Balance</Text>
<Text style={styles.text}> 250,000 </Text>
</View>
</ImageBackground>
<View
style={{
borderRadius: 5,
borderWidth: 1,
overflow: 'hidden',
height: 35,
padding: 0,
borderColor: '#00BB23',
}}>
{
<Picker
style={{
width: 300,
height: 55,
borderBottomWidth: 1,
}}
itemStyle={{
fontSize: 25,
fontFamily: 'Poppins-Medium',
}}>
<Picker.Item label="Select Bank" value="accNum" />
</Picker>
}
</View>
<TextInput
placeholder="Destination Account"
onChangeText={creditAccount => this.setState({creditAccount})}
style={styles.input}
/>
<TextInput
placeholder=" Amount"
onChangeText={amount => this.setState({amount})}
style={styles.input}
/>
<TextInput
placeholder=" Narration"
onChangeText={description => this.setState({description})}
style={styles.input}
/>
<View
style={{
borderRadius: 5,
borderWidth: 1,
overflow: 'hidden',
height: 35,
padding: 0,
top: 10,
borderColor: '#00BB23',
}}>
{
<Picker
style={{
width: 300,
height: 55,
borderBottomWidth: 1,
}}
itemStyle={{
fontSize: 25,
fontFamily: 'Poppins-Medium',
}}>
<Picker.Item label="Currency" value="accNum" />
<Picker.Item label="NGN" value="NGN" />
</Picker>
}
</View>
<TouchableOpacity
onPress={() => {
setModalVisible(true);
}}
style={styles.button}>
<Text style={styles.loginbtn}> Transfer </Text>
</TouchableOpacity>
<Modal
hasBackdrop={true}
backdropOpacity={0.2}
backdropColor="black"
transparent
visible={modalVisible}
onRequestClose={() => setModalVisible(false)}>
<View style={styles.modal}>
<Text>Hello From Modal</Text>
<TouchableOpacity>
<Text>Modal! Modal!</Text>
</TouchableOpacity>
</View>
</Modal>
</ScrollView>
</View>
);
};
export default LocalPayments;
const styles = StyleSheet.create({
container: {
paddingTop: 40,
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
},
modal: {
top: '50%',
height: '50%',
backgroundColor:'#fff'
},
accText: {
top: -50,
paddingTop: 10,
justifyContent: 'center',
alignItems: 'center',
fontFamily: 'Poppins-Medium',
fontSize: 12,
color: 'white',
textAlign: 'center',
},
text: {
top: -50,
fontSize: 20,
color: 'white',
textAlign: 'center',
fontFamily: 'Poppins-Bold',
},
input: {
top: 10,
width: 300,
height: 55,
margin: 10,
fontSize: 12,
borderColor: '#00BB23',
fontFamily: 'Poppins-Bold',
borderRadius: 5,
borderWidth: 1,
marginBottom: 30,
},
button: {
marginTop: 40,
width: 150,
height: 50,
padding: 10,
borderRadius: 10,
backgroundColor: '#00BB23',
alignItems: 'center',
},
Regbutton: {
width: 150,
height: 52,
padding: 10,
borderRadius: 10,
backgroundColor: '#ffffff',
alignItems: 'center',
borderWidth: 2,
borderColor: '#030303',
},
loginbtn: {
color: '#ffff',
fontSize: 15,
fontFamily: 'Poppins-Medium',
},
AccountBalance: {
fontSize: 13,
fontWeight: 'bold',
textAlign: 'left',
},
loginbtn2: {
color: '#030303',
fontSize: 20,
fontWeight: 'bold',
},
logo: {
width: 150,
height: 150,
},
space: {
top: 10,
width: 10,
height: 20,
},
space2: {
width: 10,
height: 10,
},
imageStyle: {
flexDirection: 'row',
justifyContent: 'center',
padding: 5,
margin: 2,
height: 15,
width: 15,
resizeMode: 'stretch',
marginBottom: 8,
marginTop: 8,
alignItems: 'center',
},
});
Been trying to get this resolved without any form of help. Please help is needed here.
Try the following:
Create this separate file: BackgroundOpacity.js
import React, {memo} from 'react';
import {Platform, View} from 'react-native';
const BackgroundOpacity = ({display}) => {
return (
<View
style={{
display: Platform.OS === 'ios' ? 'none' : display ? 'flex' : 'none'
flex: 1,
position: 'absolute',
top: 0,
height: '200%'
backgroundColor: 'black',
opacity: 0.35,
left: 0,
right: 0,
top: 0,
marginTop: -200,
zIndex: 3
}}
/>
);
};
export default memo(BackgroundOpacity);
Then implement it like this:
.... some imports
const LocalPayments = () => {
const navigation = useNavigation();
const [modalVisible, setModalVisible] = useState(false);
return (
<View style={styles.container}>
<BackgroundOpacity
display={
Platform.OS === 'ios'
? false
: modalVisible
}
/>
<View style={styles.space} />
<ScrollView
contentContainerStyle={{
justifyContent: 'space-between',
alignItems: 'center',
}}>
... Rest of your code
So we created a reusable component that can be added anywhere when you have a modal. But the question is, why are we checking that it's always an android device when we use this backgroundOpacity?
Cause for some reasons, on iOS, whenever you have an opened modal, it will automatically add a background opacity on its own.

Elevation doesn't work properly react native

I am trying to give shadow to my custom card component but the shadow cuts down the view like this:
Here is my code
import React from 'react'
import { View, StyleSheet, Text, Image, Dimensions } from 'react-native'
const { width } = Dimensions.get('window')
export default function CardCus() {
return (
<View style={{
justifyContent: 'center', alignItems: 'center', padding: 10
}}>
<View style={styles.container}>
<View style={{ width: 110, borderTopLeftRadius: 10, borderBottomLeftRadius: 10, }}>
<Image style={{ width: '100%', height: '100%', borderTopLeftRadius: 10, borderBottomLeftRadius: 10 }} source={{ uri: 'https://images.pexels.com/photos/6231818/pexels-photo-6231818.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940' }} />
</View>
<View style={{ margin: 10, padding: 5 }}>
<Text style={styles.title}>Title</Text>
<Text>Separator</Text>
<Text>Title</Text>
<Text>Title</Text>
</View>
</View>
</View>
)
}
const styles = StyleSheet.create(
{
container: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.5,
shadowRadius: 2,
elevation: 2,
flexDirection: 'row',
borderRadius: 10,
borderColor: 'black',
borderWidth: 1,
height: 110,
width: width - 10,
},
title: {
fontWeight: 'bold'
}
}
)
I have tried many different style settings but none of them work. Is there a way to solve this issue? Thanks in advance.
So related to your question, it was hard to understand at first.
I just added the properties zIndex and backgroundColor to the container style and increased the value of the elevation and now it looks better. Also improved the readability.
See the comments in the improved code below:
import React from 'react';
import { View, StyleSheet, Text, Image, Dimensions } from 'react-native';
export default function CardCus() {
const imgUri =
'https://images.pexels.com/photos/6231818/pexels-photo-6231818.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940';
return (
<View style={styles.main}>
<View style={styles.container}>
<View style={styles.imageContainer}>
<Image style={styles.image} source={{ uri: imgUri }} />
</View>
<View style={styles.textContainer}>
<Text style={styles.title}>Title</Text>
<Text>Separator</Text>
<Text>Title</Text>
<Text>Title</Text>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.5,
shadowRadius: 2,
elevation: 10, // changed to a greater value
flexDirection: 'row',
borderRadius: 10,
borderColor: 'black',
borderWidth: 1,
height: 110,
width: Dimensions.get('window').width - 10,
zIndex: 99, // added zIndex
backgroundColor: 'white', // added a background color
},
title: {
fontWeight: 'bold',
},
imageContainer: {
width: 110,
borderTopLeftRadius: 10,
borderBottomLeftRadius: 10,
backgroundColor: 'white',
},
image: {
width: '100%',
height: '100%',
borderTopLeftRadius: 10,
borderBottomLeftRadius: 10,
},
textContainer: {
margin: 10,
padding: 5,
backgroundColor: 'white',
},
main: {
justifyContent: 'center',
alignItems: 'center',
padding: 10,
},
});
You can adjust the values to make the shadow darker. And this is how it looks:

React Native touchableOpacity and ScrollView not working as expected on ios or android

I'm creating a list with ScrollView and trying to use touchable opacity on all of the rendered items. There is only 6 items in the list but I can only get touchableOpacity to work on the last 2 items.
I'm using touchableOpacity in a components folder and then importing it into a ScrollView on another screen. Any idea what I'm doing wrong or how I can fix the issue?
component code below
const FlatBench = (props) => {
return (
<View>
<ImageBackground
style={Styles.secondaryImages}
source={require("../assets/images/FlatBenchPress.png")}
>
<TouchableOpacity style={Styles.textContainer}>
<Text style={Styles.text}>Flat Bench</Text>
</TouchableOpacity>
</ImageBackground>
</View>
);
};
const Styles = StyleSheet.create({
secondaryImages: {
width: "90%",
height: "80%",
marginTop: 200,
shadowColor: "black",
shadowOffset: { width: 1, height: 2 },
shadowRadius: 6,
shadowOpacity: 0.26,
padding: 10,
width: 160,
height: 100,
borderRadius: 18,
},
textContainer: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: "center",
alignItems: "center",
backgroundColor: "black",
},
text: {
color: "#F5EDED",
fontSize: 20,
textAlign: "center",
},
});`
Screen ScrollView Code Below
const StatsScreen = (props) => {
return (
<View style={Styles.container}>
<View style={Styles.head}>
<BodyPartsImage style={Styles.top} />
<View style={Styles.top}>
<BigButton title="Body Parts" />
</View>
</View>
<ScrollView style={Styles.scrollContainer}>
<View style={Styles.bottom}>
<View style={Styles.topItem}>
<TouchableOpacity>
<FlatBench />
</TouchableOpacity>
</View>
<View style={Styles.topItem}>
<FlatBench />
</View>
<View style={Styles.bottomItem}>
<FlatBench />
</View>
<View style={Styles.bottomItem}>
<FlatBench />
</View>
<View style={Styles.bottomItem}>
<FlatBench />
</View>
<View style={Styles.bottomItem}>
<FlatBench />
</View>
</View>
</ScrollView>
</View>
);
};
const Styles = StyleSheet.create({
container: {
flex: 1,
},
scrollContainer: {},
top: {
flex: 1,
height: "1%",
alignItems: "center",
justifyContent: "center",
},
bottom: {
height: "50%",
flexDirection: "row",
flexWrap: "wrap",
marginTop: -100,
},
bottomItem: {
width: "50%",
height: "50%",
padding: 5,
marginBottom: -40,
shadowColor: "white",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.26,
shadowRadius: 6,
elevation: 1,
justifyContent: "center",
},
topItem: {
width: "50%",
height: "50%",
padding: 5,
marginBottom: 10,
shadowColor: "white",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.26,
shadowRadius: 6,
elevation: 1,
marginTop: -30,
},
buttonA: {
marginTop: -70,
marginLeft: "12%",
borderWidth: 5,
borderColor: "#d72323",
alignItems: "center",
justifyContent: "center",
width: 120,
height: 40,
backgroundColor: "#00000000",
borderRadius: 10,
},
head: {
paddingBottom: -100,
},
});
You need to refactor your spacings and find a better combination:
you have fixed height for every FlatBench but you are putting them in a fluid height container and doing negative margins.
So the FlatBench height and its (very big) margin are covering each other.
If you remove the following lines you can achieve your layout with positive margins on (bottom, bottomItem, topItem)
FlatBench style fix:
secondaryImages: {
// width: '90%',
// height: '80%',
// marginTop: 200,
shadowColor: 'black',
shadowOffset: { width: 1, height: 2 },
shadowRadius: 6,
shadowOpacity: 0.26,
padding: 10,
width: 160,
height: 100,
borderRadius: 18,
}
StatsScreen styles fix:
bottom: {
height: "50%",
flexDirection: "row",
flexWrap: "wrap",
// marginTop: -100,
},
bottomItem: {
width: "50%",
// height: '50%',
padding: 5,
// marginBottom: -40,
shadowColor: "white",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.26,
shadowRadius: 6,
elevation: 1,
justifyContent: "center",
},
topItem: {
width: "50%",
// height: '50%',
padding: 5,
// marginBottom: 10,
shadowColor: "white",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.26,
shadowRadius: 6,
elevation: 1,
// marginTop: -30,
}

Component won't stay wrapped within bounds (React Native)

I am trying to make my own tab navigation like Instagram has instagram example. I noticed that the items within the footer view I made does not stay within the bounds and moves to the top left of the screen. Images shown - What I am trying to achieve What happens frequently
Here is the most important part of my code. I have done inline styles temporarily to try and figure out the issue. Here is the part where the issue lays <View style = {{ width: Dimensions.get('window').width, backgroundColor: '#fff', height: 80}} <TouchableOpacity onPress = {() => this.props.navigation.navigate('Profile')} style = {{justifyContent: 'flex-end'}}>
<Text style = {{justifyContent: 'flex-end'}}> Profile </Text>
</TouchableOpacity> </View>-
render() {
return (
<MapView style = {[style.container, style.map]}
region = {this.state.initialPosition}>
<MapView.Marker coordinate = {this.state.markerPosition}>
<View style = {style.radius}>
<View style = {style.marker}/>
</View>
</MapView.Marker>
<View style = {{ width: Dimensions.get('window').width, backgroundColor: '#fff', height: 80}} >
<TouchableOpacity onPress = {() => this.props.navigation.navigate('Profile')} style = {{justifyContent: 'flex-end'}}>
<Text style = {{justifyContent: 'flex-end'}}> Profile </Text>
</TouchableOpacity>
</View>
</MapView>
);
}
}
const style = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-end',
//alignItems: 'center',
},
text: {
color: '#fff'
},
map: {
left: 0,
right: 0,
top: 0,
bottom: 0,
position: 'absolute'
},
radius:{
height: 50,
width: 50,
borderRadius: 50 / 2,
overflow: 'hidden',
backgroundColor: 'rgba(1,213,106,0.3)',
borderWidth: 1,
borderColor: 'rgba(1,213,106,0.3)',
alignItems:'center',
justifyContent: 'center'
},
marker: {
height: 20,
width: 20,
borderWidth: 3,
borderColor: '#fff',
borderRadius: 20 / 2,
borderWidth: 3,
overflow: 'hidden',
backgroundColor: '#01D56A'
},
menuSection: {
backgroundColor: 'rgba(255, 255, 255, 0.7)',
width: Dimensions.get('window').width,
height: Dimensions.get('window').height/3,
justifyContent: 'flex-end',
alignItems: 'center'
},
icon:{
width: 50,
height: 50,
backgroundColor: 'black'
}
})