I'm facing an issue where the buttons in NativeBase are not displaying their text. I followed the sample code from their website documentation, but when I run the code, the buttons appear without any titles. Any suggestions on how to fix this? Here's the code snippet:
App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MenuButton from './MenuButton';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.textStyle}>Welcome to the App</Text>
<MenuButton/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
top: 40,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
textStyle:{
fontSize: 30
}
});
MenuButton.js:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Container, Content, Button, Badge } from 'native-base';
export default class MenuButtons extends Component {
render() {
return (
<Container>
<Content>
<Button style={styles.button} textStyle={styles.buttonText}> HeLLO!! </Button>
<Button style={styles.button} bordered large> Info </Button>
<Button style={styles.button} bordered capitalize={true}> Primary </Button>
</Content>
</Container>
);
}
}
const styles = StyleSheet.create({
button: {
backgroundColor: 'orange',
paddingBottom: 30,
paddingTop: 30,
width: 350,
height:40,
},
buttonText:{
fontSize:40,
color:'black'
}
});