design functionality React native - react-native

I want user profile pic in half on modal and half on outside of modal
i have tried this
height: PROFILE_DIAMETER,
width: PROFILE_DIAMETER,
borderRadius: PROFILE_DIAMETER / 2,
marginLeft: 20,
top: -20,
flex: 0,
resizeMode: 'cover',
overflow: 'hidden',
transform: [{translateY: translateImageY()}, {scale: imgScale()}, {translateX: translateImageX()}]
}}
want to achieve this design functionality to react-native


<Image style={{width: '100%', zIndex: -1}} source={require('../assets/capa.png')} />
<View style={{
width: '90%',
backgroundColor: 'white',
alignSelf: 'center',
borderRadius: 10,
paddingBottom: 20
}}>
<View style={{
marginTop: -100
}}>
<Avatar
rounded
size='xlarge'
containerStyle={{ alignSelf: "center", marginTop: 20 }}
overlayContainerStyle={{
borderWidth: 1,
borderColor: '#00a9cf',
backgroundColor: 'white'
}}
source={{
uri:
'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
}}
/>
<Text style={{ color: '#383941', fontSize: 22, alignSelf: "center", fontFamily: 'PTSans-Bold' }}>{this.state.name}</Text>
<Text style={{ color: '#79787b', fontSize: 15, alignSelf: "center", fontFamily: 'PTSans-Italic' }}>{this.state.profession}</Text>
</View>
</View>
Observe the image with zindex -1 and the view containing the avatar with the negative marginTop

Related

Touchable Opacity is half way through

My code is the following
My touchable opacity that does the d.onSelect is not being responsive, it only responds to the upper top half around the border, but nothing happens when I press on a players component from the bottom half. can any one explain or help
<>
<TouchableOpacity
onPress={
props.disabled === true
? () => null
: d.onSelect
}
style={{
backgroundColor: 'red'
}}
>
<LinearGradient
colors={[Colors.Player1, Colors.Player2]}
style={{
borderRadius: 10,
margin: 10,
paddingHorizontal: 3,
paddingVertical: 10,
justifyContent: 'center',
alignItems: 'center',
borderColor: Colors.Player1,
borderWidth: 3,
backgroundColor: Colors.NewBlue
}}
>
<ImageBackground
source={require('../assets/frame2.png')}
style={{
height: 40,
width: 40,
justifyContent: 'center',
alignItems: 'center',
overflow: 'hidden'
}}
>
<Image
source={{ uri: d.image }}
style={{
height: '75%',
width: '75%'
}}
resizeMode='contain'
/>
</ImageBackground>
<Text
style={{
textAlign: 'center',
color: '#fff',
textShadowColor:
'rgba(0, 0, 0, 0.75)',
textShadowOffset: {
width: 1,
height: 1
},
textShadowRadius: 1,
fontSize: 9,
fontFamily: 'Montserrat_semi_bold'
}}
>
{d.name && d.name.split(' ', 1)}
</Text>
</LinearGradient>
</TouchableOpacity>
</>
which results in the image

Without knowing all the context or having an expo snack, I'd say you need to ensure you have flex:1 set on the TouchableOpacity component. In addition, assure that the rest of your images fit within that flex:1

Expo crash once put <Text> inside <View> without error

This is the most weird thing in Expo i never face before. I try to design new UI. but this is the first time i face this kind of issue. If i put any hi at the position i mark "HERE", once i open that screen the app will crash without error. then i remove the hi, open back Expo, its ok
Feel free to test my code. I wonder why is this happen. If i put other than such as it works.
Ive tried few times, it is confirm the error cause by only.
Ive tested on several IOS simulator, already restart the simulator even on my iphone SE 2020, it will result the same. Crashed without error
Please help me
<View
style={{
flex: 1,
}}
>
<View
style={{
flexDirection: "row",
backgroundColor: "#3341B0",
height: screenHeight / 7,
justifyContent: "space-evenly",
}}
>
<View
style={{
flexDirection: "row",
backgroundColor: "transparent",
alignItems: "flex-end",
marginBottom: 20,
width: screenWidth / 2,
}}
>
<View
style={{
width: 20,
alignItems: "flex-start",
justifyContent: "flex-start",
}}
></View>
<View
style={{
width: screenWidth,
alignItems: "stretch",
flexDirection: "column",
}}
>
<Text
style={{
fontSize: 20,
fontWeight: "700",
fontStyle: "normal",
color: "white",
}}
>
{username !== "" && <Text>{`Hello ${username}`}</Text>}
</Text>
<Text
style={{
fontSize: 10,
fontWeight: "700",
fontStyle: "normal",
color: "white",
}}
>
Company : Testing
</Text>
</View>
</View>
<View
style={{
flexDirection: "row",
backgroundColor: "transparent",
alignItems: "flex-end",
marginBottom: 20,
width: screenWidth / 2,
}}
>
<Text
style={{
fontSize: 10,
fontWeight: "700",
fontStyle: "normal",
color: "white",
}}
>
Department : Sales and Marketing
</Text>
</View>
</View>
<View
style={{
flexDirection: "row",
backgroundColor: "#3341B0",
alignItems: "flex-start",
width: screenWidth,
height: 250,
}}
>
<View
style={{
flexDirection: "column",
backgroundColor: "white",
alignItems: "flex-start",
width: screenWidth,
height: 250,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
}}
>
<View
style={{
flexDirection: "row",
backgroundColor: "transparent",
alignItems: "baseline",
marginBottom: 10,
marginTop: 10,
marginLeft: 20,
}}
>
<Text
style={{
fontSize: 15,
fontWeight: "700",
fontStyle: "normal",
color: "black",
}}
>
Work Orders
</Text>
</View>
<View
style={{
flexDirection: "row",
backgroundColor: "transparent",
alignItems: "baseline",
marginBottom: 10,
marginLeft: 10,
marginRight: 10,
marginTop: 10,
}}
>
<View
style={{
width: screenWidth / 3 - 20,
height: 80,
backgroundColor: "#041FFB",
marginLeft: 10,
borderRadius: 5,
alignItems: "center",
justifyContent: "center",
}}
>HERE</View>
<View
style={{
width: screenWidth / 3 - 20,
height: 80,
backgroundColor: "#FBD15F",
marginLeft: 10,
borderRadius: 5,
}}
>HERE</View>
<View
style={{
width: screenWidth / 3 - 20,
height: 80,
backgroundColor: "pink",
marginLeft: 10,
borderRadius: 5,
}}
>
HERE
</View>
</View>
</View>
</View>
</View>

Keyboard moving view up in react native expo

I am new in react native and I please need help. When the keyboard appears , the whole view is pushed upwards.I do not want that to happen.I saw other answers but none of them is working for me.I do not want the view to be pushed up when the keyboard appears and want to remain where they are.I am using expo and has given the code below with the images.
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Image, StyleSheet, View, TextInput, Text, TouchableOpacity, ScrollView, KeyboardAvoidingView } from 'react-native';
export default function LoginScreen({ navigation }) {
return (
<View style={styles.container}>
<Image style={styles.logo} source={
{
uri: "https://i.ibb.co/4JK4T3P/deale-logo.jpg",
}} />
<StatusBar style="auto" />
<View style={styles.inputContainer} >
<TextInput
style={styles.loginInput}
placeholder='Phone Number or Email'
/>
<TextInput
style={styles.passwordInput}
placeholder='Password'
/>
<TouchableOpacity
style={{
width: 280,
height: 50,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgb(255, 77, 77)',
elevation: 5,
borderRadius: 10,
top: 35
}}
activeOpacity={0.8}>
<Text
style={{
color: 'white',
fontSize: 15,
fontWeight: 'bold',
}} >
LOG IN
</Text>
</TouchableOpacity>
<Text
onPress={() => console.log('g')}
style={{
position: 'relative',
top: '23%',
fontWeight: 'bold',
}} >
OR LOGIN WITH SOCIAL MEDIA ACCOUNT?
</Text>
<View style={{
flex: 1,
flexDirection: 'row',
bottom: 30,
justifyContent: 'space-evenly',
top: '22%',
width: 300
}} >
<TouchableOpacity activeOpacity={0.5} >
<Image source={
{ uri: 'https://cdn3.iconfinder.com/data/icons/popular-services-brands/512/facebook-512.png' }}
style={{
width: 60,
height: 60,
}} />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.5} >
<Image source={
{ uri: 'https://lh3.googleusercontent.com/COxitqgJr1sJnIDe8-jiKhxDx1FrYbtRHKJ9z_hELisAlapwE9LUPh6fcXIfb5vwpbMl4xl9H9TRFPc5NOO8Sb3VSgIBrfRYvW6cUA' }}
style={{
width: 60,
height: 60,
}} />
</TouchableOpacity>
</View>
</View >
<View style={styles.loginButtonView} >
<TouchableOpacity
onPress={
() => navigation.navigate('Create')
}
style={{
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgb(145, 157, 230)',
top: 10,
elevation: 5,
borderRadius: 5
}}
activeOpacity={0.8}>
<Text
style={{ color: 'white', fontSize: 15, fontWeight: 'bold' }} >
CREATE ACCOUNT
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
justifyContent: 'center',
alignItems: 'center',
top: '40%'
}}
activeOpacity={0.1}>
<Text
style={{
color: 'black',
fontSize: 16,
top: 5
}} >
FORGOT PASSWORD
</Text>
</TouchableOpacity>
</View>
</View >
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
logo: {
position: 'absolute',
height: 100,
width: 150,
resizeMode: "contain",
top: '3 %'
},
loginInput: {
position: 'relative',
height: 50,
borderColor: 'black',
backgroundColor: 'rgb(240, 240, 242)',
borderRadius: 10,
width: 280,
color: 'black',
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
borderColor: 'white',
},
inputContainer: {
position: 'absolute',
top: '18%',
alignItems: 'center',
},
passwordInput: {
position: 'relative',
height: 50,
borderColor: 'black',
backgroundColor: 'rgb(240, 240, 242)',
borderRadius: 10,
width: 280,
color: 'black',
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
borderColor: 'white',
top: 10
},
loginButtonView: {
position: 'absolute',
height: 46,
width: '70%',
top: '80%'
}
});

I figured out the reason myself.It was happening because i had set my positions based on percentage and the popping of keyboard changed the dimensions resulting in the change of position.

Try to use the component KeyboardAvoidingView like this:
<KeyboardAvoidingView behavior={'height'} enabled style={styles.container}>
<Image style={styles.logo} source={
{
uri: "https://i.ibb.co/4JK4T3P/deale-logo.jpg",
}} />
<StatusBar style="auto" />
<View style={styles.inputContainer} >
<TextInput
style={styles.loginInput}
placeholder='Phone Number or Email'
/>
<TextInput
style={styles.passwordInput}
placeholder='Password'
/>
<TouchableOpacity
style={{
width: 280,
height: 50,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgb(255, 77, 77)',
elevation: 5,
borderRadius: 10,
top: 35
}}
activeOpacity={0.8}>
<Text
style={{
color: 'white',
fontSize: 15,
fontWeight: 'bold',
}} >
LOG IN
</Text>
</TouchableOpacity>
<Text
onPress={() => console.log('g')}
style={{
position: 'relative',
top: '23%',
fontWeight: 'bold',
}} >
OR LOGIN WITH SOCIAL MEDIA ACCOUNT?
</Text>
<View style={{
flex: 1,
flexDirection: 'row',
bottom: 30,
justifyContent: 'space-evenly',
top: '22%',
width: 300
}} >
<TouchableOpacity activeOpacity={0.5} >
<Image source={
{ uri: 'https://cdn3.iconfinder.com/data/icons/popular-services-brands/512/facebook-512.png' }}
style={{
width: 60,
height: 60,
}} />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.5} >
<Image source={
{ uri: 'https://lh3.googleusercontent.com/COxitqgJr1sJnIDe8-jiKhxDx1FrYbtRHKJ9z_hELisAlapwE9LUPh6fcXIfb5vwpbMl4xl9H9TRFPc5NOO8Sb3VSgIBrfRYvW6cUA' }}
style={{
width: 60,
height: 60,
}} />
</TouchableOpacity>
</View>
</View >
<View style={styles.loginButtonView} >
<TouchableOpacity
onPress={
() => navigation.navigate('Create')
}
style={{
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgb(145, 157, 230)',
top: 10,
elevation: 5,
borderRadius: 5
}}
activeOpacity={0.8}>
<Text
style={{ color: 'white', fontSize: 15, fontWeight: 'bold' }} >
CREATE ACCOUNT
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
justifyContent: 'center',
alignItems: 'center',
top: '40%'
}}
activeOpacity={0.1}>
<Text
style={{
color: 'black',
fontSize: 16,
top: 5
}} >
FORGOT PASSWORD
</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView >
Try to use different values in the position prop.
If you want less job, you can use the react-native-keyboard-aware-scroll-view. It's a very good lib to work with Keyboard in different layouts.

Reactnative make Dialog background transparent

I am using Dialog to show a popup issue is i am not able to change its background color to transparent.
return (
<View style={styles.container}>
{
loading
? <ActivityIndicator color="#10cea8" size="large" />
: brands == null || brands.length < 1
?
<Text style={{ fontSize: 20, fontWeight: 'bold', color: 'grey' }}>
No restaurants found :(
</Text>
:
<ScrollView contentContainerStyle={{ paddingBottom: 24 }} style={{ paddingBottom: 24 }} keyboardShouldPersistTaps="handled">
<Dialog contentStyle={{ margin: 0, padding: 0, marginTop: 0, paddingTop: 0, backgroundColor: 'rgba(52, 52, 52, 0.9)' }}
visible={dialogVisible}
animationType={'slide'}
>
<View style={styles.pop}>
<Image
source={require('../../../public/images/logo.png')}
resizeMode={'contain'}
style={{
width: 200,
height: 130
}}
/>
<View style={{ height: 10 }}></View>
<Text style={{ textAlign: 'center', color: "white", fontSize: 21, }}>Happy to serve you !</Text>
<Text style={{ textAlign: 'center', color: "white", fontSize: 18 }}>Choose your nearest Branch.</Text>
<View style={{ height: 30 }}></View>
<TouchableOpacity onPress={() => setDialogVisible(false)} style={{ backgroundColor: 'white', width: '100%', height: 45, justifyContent: 'center' }}><Text style={{ textAlign: 'center', color: "#10cea8", fontSize: 18 }}>GOT IT</Text></TouchableOpacity>
</View>
</Dialog>
{
brands.length > 0 && brands.map((b, i) => {
return (
<TouchableOpacity key={`brand-${i}`}
onPress={() => {
navigation.navigate('Menus', {
Locations: b.Locations,
brandID: b.BrandID,
brandName: b.Name
})
}}>
<View style={styles.cardStyle} >
<ImageBackground
style={styles.backgroundImgStyle}
imageStyle={{ borderRadius: 15 }}
source={{ uri: b.CompanyURl }}
>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Image
style={styles.logoStyle}
source={{ uri: b.Image }}
/>
<Text style={styles.title} >
{b.Name}
</Text>
<Text style={styles.description} >
{b.Address}
</Text>
</View>
</ImageBackground>
</View>
</TouchableOpacity>
)
})
}
</ScrollView>
}
</View>
)
}
export default Home;
const styles = StyleSheet.create({
pop: {
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
borderBottomRightRadius: 30,
borderBottomLeftRadius: 30,
overflow: 'hidden',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#10cea8'
},
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
cardStyle: {
borderColor: '#B0A8A6',
width: Dimensions.get('window').width - 30,
height: 185,
borderRadius: 15,
justifyContent: 'center',
alignItems: 'center',
marginTop: 24
},
backgroundImgStyle: {
width: '100%',
height: '100%',
resizeMode: 'cover'
},
logoStyle: {
justifyContent: 'center',
alignItems: 'center',
width: 65,
height: 65
},
title: {
color: 'white',
fontSize: 20,
marginTop: 10,
lineHeight: 28,
fontWeight: 'bold'
},
description: {
color: 'white',
fontSize: 13,
lineHeight: 20,
fontWeight: '400'
}
});
As you can see i have set backgroundColor to rgba(52, 52, 52, 0.9) but its not going to transparent. if i change it to red or blue something it working but transparent not working on this.
[![enter image description here]
you can see the popup behind borderRadius its showing dark grey color. I need to make it full transparent.

how to add a reset state when user deletes text from otp text inputs using React native otp input?

I have created an OTP screen using react-native-otp-input as follows:
when I enter the code the continue button turns pink as code state is set to the value like follows
but when I try emptying the code inputs the continue button is still pink as the code state is not refreshed
My code for the otp input view and continue button is as follows:
<View style={{alignItems: 'center'}}>
<OTPInputView
style={{width: '90%', height: 40}}
pinCount={5}
codeInputFieldStyle={{
width: 30,
height: 45,
borderWidth: 0,
borderBottomWidth: 1,
borderBottomColor: '#808080',
}}
codeInputHighlightStyle={{
borderBottomColor: '#000',
color: '#000',
borderBottomWidth: 1,
borderWidth: 0,
}}
codeInputFieldStyle={{
color: '#000',
borderBottomColor: '#000',
borderBottomWidth: 1,
borderWidth: 0,
}}
onCodeFilled={(code) => {
setCode(code);
}}
/>
</View>
</KeyboardAvoidingView>
<View style={{alignItems: 'center', justifyContent: 'center'}}>
{code == '' ? (
<TouchableOpacity
style={{
backgroundColor: '#C0C0C0',
width: 250,
height: 50,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
marginTop: '10%',
}}
disabled={true}>
<Text style={{color: 'white', fontSize: 18}}>Continue</Text>
</TouchableOpacity>
) : otpresponseLoading == true ? (
<ActivityIndicator
size="large"
color="#FE017E"
style={{marginTop: '10%'}}
/>
) : (
<TouchableOpacity
style={{
backgroundColor: '#FF1493',
width: 250,
height: 50,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
marginTop: '10%',
}}
onPress={() => onContinueHandlePress()}>
<Text style={{color: 'white', fontSize: 18}}>Continue</Text>
</TouchableOpacity>
)}
</View>
Could anyone please let me know how do I handle the backpress in this dependency? and refresh the state of code when user deletes code?
Any lead would be great, do let me know if anything else is required for better understanding
thank you in advance.

let's try :
<KeyboardAvoidingView>
<View style={{ alignItems: 'center' }}>
<OTPInputView
style={{ width: '90%', height: 40 }}
pinCount={5}
codeInputFieldStyle={{
width: 30,
height: 45,
borderWidth: 0,
borderBottomWidth: 1,
borderBottomColor: '#808080',
}}
codeInputHighlightStyle={{
borderBottomColor: '#000',
color: '#000',
borderBottomWidth: 1,
borderWidth: 0,
}}
codeInputFieldStyle={{
color: '#000',
borderBottomColor: '#000',
borderBottomWidth: 1,
borderWidth: 0,
}}
onCodeChanged={(code) => {
setCode(code);
}}
/>
</View>
</KeyboardAvoidingView>
<View style={{ alignItems: 'center', justifyContent: 'center' }}>
{code.length !== 5 ? (
<TouchableOpacity
style={{
backgroundColor: '#C0C0C0',
width: 250,
height: 50,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
marginTop: '10%',
}}
disabled={true}>
<Text style={{ color: 'white', fontSize: 18 }}>Continue</Text>
</TouchableOpacity>
) : otpresponseLoading == true ? (
<ActivityIndicator
size="large"
color="#FE017E"
style={{ marginTop: '10%' }}
/>
) : (
<TouchableOpacity
style={{
backgroundColor: '#FF1493',
width: 250,
height: 50,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
marginTop: '10%',
}}
onPress={() => onContinueHandlePress()}>
<Text style={{ color: 'white', fontSize: 18 }}>Continue</Text>
</TouchableOpacity>
)}
</View>