Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6214

native base Text showing uppercase on only some screens

$
0
0

I am using Native Base Text in 2 different components. In this one by default, the Text is shown in uppercase, unless I add uppercase={false}.

export const ActionButton: React.FunctionComponent<ActionButtonProps> = ({  style,  disabled,  buttonText,  onPress,}) => {  return (<Button rounded onPress={onPress} disabled={disabled} style={[styles.button, style]}><Text uppercase={false} style={styles.text}>{buttonText}</Text></Button>  );};const styles = StyleSheet.create({  button: {    width: moderateScale(160),    height: moderateScale(50),    backgroundColor: '#31C283',    justifyContent: 'center',  },  text: { color: 'white', fontSize: moderateScale(13, 0.7), fontWeight:'600' },});

However, in the following component, text is lowercase, even without using uppercase=false. Why is it different in the two components? What am I doing wrong?

export const TripOptionsSelector: React.FunctionComponent = () => {  const navigation = useNavigation();  return (<View style={styles.offerContainer}><Text style={styles.offerText}>Jetzt</Text><Text style={styles.offerText}>1 Person</Text><Text style={styles.offerText} onPress={()=>navigation.navigate('TripFilter')}>Filter</Text></View>  );};const styles = StyleSheet.create({  offerContainer: {    flexDirection: 'row',  },  offerText: {    color: 'white',    marginRight: moderateScale(20),    paddingHorizontal: 10,    fontSize: moderateScale(14),    borderColor: 'white',    borderWidth: 1,    borderRadius: 10,    alignItems: 'center',    justifyContent: 'center',  },});

Codesandbox: https://snack.expo.io/@nhammad/trusting-hummus


Viewing all articles
Browse latest Browse all 6214

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>