Vertical button using React Native

Question

I am new to react. I want to create a vertical button using react native. How can I do that? The required image of button is attached for your reference. Any help would be really appreciated.

Answer 1

Here is a simple way to do it using Switch: (First picture: IOS, Second picture: Android)

import React, { Component } from 'react';
import { Text, View, StyleSheet, Switch } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  state = {
    accept: false
  }
  render() {
    return (
      <View style={styles.container}>
        <View style={{flex: 2, alignItems: "center"}}>
          <Text>Turn on the switch when you want to accept work, and turn it off when you dont!</Text>
        </View>
        <View style={{flex: 1, alignItems: "center"}}>
          <Switch 
            style={styles.verticalSwitch}
            value={this.state.accept}
            onTintColor="blue"
            onValueChange={() => this.setState({accept:!this.state.accept})}
          />
          <Text style={{marginTop: 12}}>
            {this.state.accept ? "on" : "off"}
          </Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
    paddingHorizontal: 20,
  },
  verticalSwitch: {
    transform: [{ rotate: '-90deg'}]
  }
});