Button width in react-native-paper

Question

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.

score 2 · Accepted Answer · answered Jul 04 '20 at 04:39

2

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>

answered Jul 04 '20 at 04:39

Ferin Patel

3,424
2
17
49

thanks it working, but what is the use of "contentStyle" – raju Jul 04 '20 at 04:48
MaterialBottomTab doesn't support contentStyle. Even docs of React-native-paper and react-navigation doesnt mentioned about contentStyle – Ferin Patel Jul 04 '20 at 04:52
I don't like this approach. There should be a better way and should be provided by react-native-paper. The image which they show doesn't have the full width though. – Dhaval Jardosh Feb 14 '21 at 03:44
Check this out: https://github.com/callstack/react-native-paper/issues/1979#issuecomment-654310158 – Dhaval Jardosh Feb 14 '21 at 03:47
The style prop on the Botton doesnt actually work – xv8 Jul 25 '21 at 07:09

score 0 · Answer 2 · answered Dec 01 '21 at 03:22

0

If your View tag is a container for the button, the button needs its own View tag with the styles prop called there.

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



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

answered Dec 01 '21 at 03:22

Haydn Oleson

3
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 01 '21 at 08:56

Button width in react-native-paper

2 Answers2