react-native-button-group

Description:

A group of buttons that can be added to the button. This group can be used to control whether the group of buttons is fixed at the top of the page or fixed in the middle or fixed at the bottom by passing attributes. It is also possible to perform flow layout and follow the bottom of the main page..

The final rendering

Installation:

 npm install --save react-native-button-group

Example usage:

1.basic

import ButtonGroup from 'react-native-button-group';
   ...
render() {
    return (
      <View style={{ flex: 1 }}>
        <Text style={{ marginBottom: 10 }}>{this.state.count}</Text>
        <ButtonGroup>
          <Button
            title={'top button group'}
            onPress={() => this.setState({ count: 'submit' })}
          />
        </ButtonGroup>
      </View>
    );
  }

Props:

Props	Explain	type	require	default
position	The position of the button group, which is one of (center, top, bottom), must be isFloat=true	string	no	bottom
isFLoat	If true, Position attribute will work	bool	no	false
style	button group style,The style used to modify the button group style	object	no	{padding: 5,width: WINDOW_EIDTH, backgroundColor: '#fff',flexDirection: 'row',justifyContent: 'space-between'}

Examples from props:

   render() {
     return (
       <View style={styles.container}>
         <Text style={{ marginBottom: 10 }}>{this.state.count}</Text>
         <ButtonGroup
           isFLoat={true}
           position={'top'}
         >
           <Button
             title={'top button group'}
             onPress={() => this.setState({ count: 'submit' })}
           />
         </ButtonGroup>
         <ButtonGroup
           isFLoat={true}
           position={'center'}
         >
           <Button
             title={'center button group'}
             onPress={() => this.setState({ count: 'submit' })}
           />
           <Button
             title={'center button group'}
             onPress={() => this.setState({ count: 'submit' })}
           />
         </ButtonGroup>
         <ButtonGroup
           isFLoat={true}
           position={'bottom'}
         >
           <Button
             title={'bottom button group'}
             onPress={() => this.setState({ count: 'submit' })}
           />
         </ButtonGroup>
       </View>
     );
   }

LICENSE:

MIT

suwu150 / react-native-button-group