If you look at other examples, you can see them reacting immediately.
But my code reacts slowly.
If you watch the video, you can see what I mean.(https://youtu.be/jo_iDDh2WBw)
Please tell me a solution to this.
Below is my code.
<SafeAreaView style={{...structure.safeViewContainer, backgroundColor: "#ffffff"}}>
<View style={{...structure.container}}>
<BlurView intensity={100} style={{...structure.headerBox}}>
<Header arrow={false} navigation={navigation} />
</BlurView>
<ScrollView style={{...structure.contentContainer, overflow: 'visible', backgroundColor: colors.lightGray}}>
<View style={structure.contentBox}>
<View style={{ right: 0, left: 0, backgroundColor: "#000000", height: 300, borderRadius: 20 }}></View>
<View style={{ right: 0, left: 0, backgroundColor: "#ffffff", height: 300, marginTop: 30, borderRadius: 20 }}></View>
<View style={{ right: 0, left: 0, backgroundColor: "#ffffff", height: 300, marginTop: 30, borderRadius: 20 }}></View>
<View style={{ right: 0, left: 0, backgroundColor: "#ffffff", height: 300, marginTop: 30, marginBottom: 55, borderRadius: 20 }}></View>
</View>
</ScrollView>
<View style={{ backgroundColor: colors.lightGray, right: 0, left: 0, height: 20, bottom: -20, position: "absolute" }}></View>
</View>
<TabBar navigation={navigation} />
</SafeAreaView>
Related
<View
style={{
width: '100%',
height: 10,
borderTopLeftRadius: 30,
borderTopRightRadius: 10,
backgroundColor: DefaultVariables.Colors.primary,
}}
/>
make this shape
Can anybody help to make such kind of shape in React Native?
hope this will help you
return (
<View
style={{
width: 200,
height: 200,
borderColor: '#000',
borderWidth: 0.5,
backgroundColor: 'white',
marginLeft: 60,
marginTop: 100,
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
}}>
<View
style={{
backgroundColor: 'blue',
width: 200,
height: 20,
borderColor: '#000',
borderWidth: 0.5,
marginTop: 0,
marginLeft: 0,
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
}}></View>
</View>
);
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
I am trying to create a circular cutout in React Native, something similar to the image below where the light grey is transparent.
I can successfully duplicate this design using absolute positioning and fixed background colours but am unsure of how I would go about making the cutout around the image at the top transparent?
I actually found a method of doing this using only styling, the trick was to use the inside of a curved border to create the circular cutout.
Snack
<View style={styles.container}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View
style={{
height: 20,
width: 80,
borderTopLeftRadius: 30,
backgroundColor: 'black',
}}
/>
<View style={{ width: 40 }} />
<View
style={{
position: 'absolute',
bottom: -10,
left: 70,
width: 30,
height: 30,
borderBottomWidth: 10,
borderLeftWidth: 10,
borderColor: 'black',
borderBottomLeftRadius: 45,
}}
/>
<View
style={{
position: 'absolute',
right: 85,
top: -15,
borderRadius: 100,
height: 30,
width: 30,
backgroundColor: 'blue',
}}
/>
<View
style={{
position: 'absolute',
bottom: -10,
right: 70,
width: 30,
height: 30,
borderBottomWidth: 10,
borderRightWidth: 10,
borderColor: 'black',
borderBottomRightRadius: 45,
}}
/>
<View
style={{
height: 20,
width: 80,
borderTopRightRadius: 30,
backgroundColor: 'black',
}}
/>
</View>
<View
style={{
height: 180,
width: 200,
borderBottomLeftRadius: 30,
borderBottomRightRadius: 30,
backgroundColor: 'black',
}}
/>
</View>
You can set position:"absolute" to image view, and set its position accordingly.
Try this,
<View
style={{
height:400,
justifyContent: 'center',
marginTop: 100,
}}>
<View
style={{
backgroundColor: 'grey',
height: 80,
width: 80,
alignSelf: 'center',
borderRadius: 40,
borderColor: '#FFFFFF',
borderWidth: 10,
position: 'absolute',
top: -40,
zIndex: 1,
alignItems:"center",
justifyContent:"center"
}}
>
<Text>Image</Text></View>
<View
style={{
height: 400,
margin: 20,
backgroundColor: 'grey',
borderRadius: 40,
}}
></View>
</View>
see working expo example here
You can create the top left and top right sides of the box then put an image cutout in the middle in the shape of the semicircle for the circle to fit in.
<View style={styles.container}>
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<View style={{backgroundColor: 'grey', width: 125, height: 45, borderTopLeftRadius: 45}}></View>
<View style={{backgroundColor: 'grey', width: 125, height: 45, borderTopRightRadius: 45}}></View>
</View>
<View style={{backgroundColor: 'grey', height: 300, width:308, borderBottomLeftRadius: 45, borderBottomRightRadius: 45}}></View>
<View style={{position: 'absolute', alignSelf: 'center', top: 145}}>
<ImageBackground
style={{width: 60, height: 50}}
source={{uri: "https://i.imgur.com/ncjPX1k.png"}}>
<View style={{backgroundColor: 'grey',width:50, height: 50, borderRadius: 27.5, top: -30, alignSelf: 'center'}}></View>
</ImageBackground>
</View>
</View>
See the snack (styling is a bit off):
I have created this button and I am trying to achieve something like this:
Here's my approach so far:
<TouchableOpacity disabled={disabled} style={{position:'absolute', bottom:5, right:10}}
onPress={()=>navigation.navigate('FilterByIngreds')}>
<View style={floatStyle}>
<Image style={{ width:40, height: 44, justifyContent:'center', alignItems:'center'}}
source= {require('../../assets/img/05_items/ingIcon.png')}/>
</View>
<View style={{width:16, height:16, borderWidth:2, borderColor:'#fff',
borderRadius:8, backgroundColor:'rgba(65, 204, 151, 1)',
position:'absolute', top:2, right:5, zIndex:5}}/>
</TouchableOpacity>
But the DOT is behind the Button.
Any help will be appreciated. Thanks in advance!
You need to remove < View style={floatstyle} > and try this code
< TouchableOpacity
disabled={true}
style={{ position: "absolute", bottom: 5, right: 10 }}
onPress={() => navigation.navigate("FilterByIngreds")}
>
<Image
style={{
width: 100,
height: 100,
justifyContent: "center",
borderRadius: 100 / 2,
backgroundColor: "#000",
alignItems: "center"
}}
/>
<View
style={{
width: 16,
height: 16,
borderWidth: 2,
borderColor: "#f0f",
borderRadius: 8,
backgroundColor: "rgba(65, 204, 151, 1)",
position: "absolute",
top: 5,
right: 10,
zIndex: 5
}}
/>
</TouchableOpacity>
I want to make a button as the below.
Please help me.
Here are two ways to do it:
This one uses skewX:
<View style={{
width: 200,
height: 50,
borderWidth: 4,
borderColor: 'black',
// Uncomment this to see how it looks unclipped
overflow: 'hidden',
borderRadius: 10,
backgroundColor: 'white',
position: 'relative',
// These are to center the text
alignItems: 'center',
justifyContent: 'center',
}}>
<View style={{
width: 120,
height: 70,
position: 'absolute',
// These offsets were required because the transform
// would move them off the edges
right: -10,
top: -10,
backgroundColor: 'yellow',
borderLeftWidth: 5,
borderLeftColor: 'black',
transform: [{
skewX: '-45deg',
}]
}} />
<Text style={{
backgroundColor: 'transparent',
fontSize: 20,
}}>Hello World</Text>
</View>
And here's the other way using rotateX:
<View style={{
width: 200,
height: 50,
borderWidth: 4,
borderColor: 'black',
// Uncomment this to see how it looks unclipped
overflow: 'hidden',
borderRadius: 10,
backgroundColor: 'white',
position: 'relative',
// These are to center the text
alignItems: 'center',
justifyContent: 'center',
}}>
<View style={{
width: 100,
height: 150,
position: 'absolute',
// These offsets were required because the transform
// would move them off the edges
right: 10,
top: -30,
backgroundColor: 'yellow',
borderLeftWidth: 4,
borderLeftColor: 'black',
transform: [{
rotate: '45deg',
}]
}} />
<Text style={{
backgroundColor: 'transparent',
fontSize: 20,
}}>Hello World</Text>
</View>
I prefer the rotation method because the skew will mess with the border width of the diagonal line.