I am using react-native-gifted-chat in my react-native application. Chat Bubble style is not same on all bubble. I have used borderRadius: 30, For first message bubble shape is properly shown, from second message bubble shape of bubble is getting differed. I have added the following code:
<Bubble
{...props}
wrapperStyle={{
right: {
backgroundColor: colors.chatPurple,
borderRadius: 30,
borderBottomRightRadius: 30,
marginBottom: 10,
padding: 5,
right: 15,
justifyContent: "flex-end",
alignSelf: 'stretch',
marginLeft: 0,
alignSelf: "center"
},
left: {
backgroundColor: colors.lightGreen,
borderRadius: 30,
marginBottom: 20,
padding: 5,
left: -30
}
}}/>
I would like to get the Bubble shape as same on all Bubbles.
Setting the borderRadius for each corner separately (e.g. borderBottomRightRadius) works for me.
Simply setting borderRadius won't work because the borderBottomRightRadius, borderTopRightRadius etc. in the react-native-gifted-chat code overrides it, since the more exact style (separate for each corner) always overrides the more general style (same for every corner).
I faced a similar issue where I wanted a radius on 3 out of 4 corners, but it only worked for the first bubble:
After setting the BorderRadius properties on the containerToPreviousStyle, containerToNextStyle and containerStyle props, I got it to work as expected:
The code is as follows:
const renderBubble = props => {
return (
<Bubble
{...props}
{/* copy what you have in wrapperStyle */}
wrapperStyle={{
right: { borderTopRightRadius: 15 },
left: { borderTopLeftRadius: 15 },
}}
{/* and paste it into the follow 3 */}
containerToPreviousStyle={{
right: { borderTopRightRadius: 15 },
left: { borderTopLeftRadius: 15 },
}}
containerToNextStyle={{
right: { borderTopRightRadius: 15 },
left: { borderTopLeftRadius: 15 },
}}
containerStyle={{
right: { borderTopRightRadius: 15 },
left: { borderTopLeftRadius: 15 },
}}
/>
);
};
add this bubble with a BordeRadius
or just add container style
<Bubble
{...props}
wrapperStyle={{
right:
{
height: 200,
backgroundColor: 'blue',
},
}}
/>
Use this code
<Bubble
{...props}
wrapperStyle={{
right: {
backgroundColor: '#EFE5D9',
borderBottomRightRadius: 0,
borderBottomLeftRadius: 15,
borderTopRightRadius: 15,
borderTopLeftRadius: 15,
},
left: {
backgroundColor: '#F9F5F0',
borderBottomRightRadius: 15,
borderBottomLeftRadius: 15,
borderTopRightRadius: 15,
borderTopLeftRadius: 0,
}
}}
/>
Related
I have this problem and I have not been able to solve it, how can I make view 1 limited by view 2?
I need view 1 not to leave the edges of view 2, the image is on the outside, it should be cropped limited by view 2, I don't know if I make myself understood
<View style={styles.container}>
<View style={styles.progressBar}>
<Animated.View style={[styles.absoluteFill, { borderRadius: 30, backgroundColor: colors.blue2, width }]} />
</View>
<Text style={styles.progressText}>
{`${progress}%`}
</Text>
</View>
const styles = StyleSheet.create({
absoluteFill: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
},
progressText: {
position: 'absolute',
color: colors.white,
fontFamily: "OpenSans-Regular"
},
container: {
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
height: 30,
borderRadius: 30,
},
progressBar: {
//alignSelf: 'baseline',
height: 30,
width: '100%',
backgroundColor: colors.blue3,
borderRadius: 30
}
})
thank you
You need to add an overflow: hidden at your progressBar style.
progressBar: {
height: 30,
width: '100%',
overflow: 'hidden',
backgroundColor: colors.blue3,
borderRadius: 30
}
I did this live demo for you:
https://codesandbox.io/s/vibrant-fermi-49ztl?file=/src/App.js
I'm having a hard time setting some shadow only for the left and right part of a view like this: imgur
I've been trying to work out the properties on react-native-shadow-generator website but to no success. Anyone knows how / if this is possible to be achieved in react-native?
You can do like this:
return (
<View style={styles.mainContainer}>
<View elevation={5} style={styles.boxStyle}>
<Text>Box 1</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
mainContainer: {
backgroundColor: '#ebebeb',
padding: 10,
height : height
},
boxStyle: {
backgroundColor: '#fff',
alignItem: 'center',
justifyContent: 'center',
flexDirection: 'column',
marginLeft: 30,
marginTop: 15,
width: 120,
height: 120,
padding: 12,
borderRadius: 8,
shadowColor: "00000",
shadowOpacity: 0.9,
shadowRadius: 4,
shadowOffset: {
height: 2,
width: 2
}
}
});
Im just having an issues with creating a custom navigation tab bar and centering the icons vertically. It looks like it been pushed up a bit as per below screenshot:
This is the style i have for the tab navigation:
tabBarOptions: {
activeTintColor: '#e91e63',
labelStyle: {
fontSize: 12,
},
style: {
position: 'absolute',
backgroundColor: 'white',
width: DEVICE_WIDTH * 0.94,
borderBottomLeftRadius: 33,
borderBottomRightRadius: 33,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
bottom: 12,
marginLeft: '2.8%',
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 0.3
},
shadowRadius: 5,
shadowOpacity: 0.1
}
Many thanks!
Was able to fix this by specifying a style for the icon:
<Icon
name="user"
color={tintColor}
size={28}
style={{ textAlignVertical: 'center' }}
/>
How to add custom shape buttons , for example a pentagon shaped button on react native application. Any help or input would be appreciated.
Here is one way to achieve it (View Snack):
export class PentagonButton extends Component {
render() {
return (
<TouchableOpacity onPress={() => { }}>
<View style={styles.pentagon}>
<View style={styles.pentagonInner} />
<View style={styles.pentagonBefore} />
</View>
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
pentagon: {
backgroundColor: 'transparent'
},
pentagonInner: {
width: 90,
borderBottomColor: 'red',
borderBottomWidth: 0,
borderLeftColor: 'transparent',
borderLeftWidth: 18,
borderRightColor: 'transparent',
borderRightWidth: 18,
borderTopColor: 'red',
borderTopWidth: 50
},
pentagonBefore: {
position: 'absolute',
height: 0,
width: 0,
top: -35,
left: 0,
borderStyle: 'solid',
borderBottomColor: 'red',
borderBottomWidth: 35,
borderLeftColor: 'transparent',
borderLeftWidth: 45,
borderRightColor: 'transparent',
borderRightWidth: 45,
borderTopWidth: 0,
borderTopColor: 'transparent',
}
});
This example is using views in different shapes to build your button. Credit to #browniefed who has made a lot of different shapes here.
Another way to solve it is using React ART wich is a great way of creating shapes in React Native. Here are the unofficial docs.
He, I was trying to put the right styles in place in order to see the focus image over the camera screen with a little padding on all sides, but somehow I could not get it done.
The shoutem.camera source looks like:
<View style={style.cameraContainer}>
<Camera
onBarCodeRead={this.onQRCodeScanned}
style={style.cameraView}
aspect={Camera.constants.Aspect.fill}
captureQuality={cameraQuality}
/>
<Image
source={require('../assets/images/focus-frame.png')}
style={style.cameraFocusFrame}
/>
</View>
I am asking for style.cameraContainer & style.cameraView & style.cameraFocusFrame.
The style rules for those styles can be found at the very end of themeName.js. Here it is from the default theme, Rubicon:
'shoutem.camera.QRCodeScanner': {
cameraContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
cameraFocusFrame: {
width: 175,
height: 165,
resizeMode: 'contain',
},
cameraView: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
},
noPermissionsMessage: {
alignSelf: 'center',
fontSize: 18,
lineHeight: 20,
},
}
We do intend to reimplement the focus frame to be responsive by nature, as you had mentioned.