react-nativereact-native-paper

Button width in react-native-paper


I am starting learning react-native-paper, i am not sure how to fix button width, currently it fills whole parent container.

    <View>
        <Button 
        icon="camera" 
        mode="contained" 
        onPress={() => console.log('Pressed')}
        contentStyle={styles.btn}
        >
            Press me
        </Button>
    </View>



const styles = StyleSheet.create({
    btn: {
        width: 30
    }
})

This is not working and button is still full width. Need some help.


Solution

  • You can change the width of Button directly using style props and adding width to it.

    <Button 
       icon="camera" 
       mode="contained" 
       onPress={() => console.log('Pressed')}
       style={{ width: 100 }}
    >
      Press me
    </Button>