You can resize the switch by using transform property from styling,

<Switch value={true}
style={{ transform: [{ scaleX: .8 }, { scaleY: .8 }] }}
onValueChange={(value) => {}} />

also for best result determine scaling values based on screen dimension.

I think a good way is to make a custom factory I made a custom switch once, I'll post it here. I did not modify the looks of the Switch but I'm confident you could create a component that looks like your image and then use it in your factory. In my case I aligned some text with the switch with a clickable link and so on. I have not tried it but i guess you can replace the Switch component with your own.

import React from 'react';
import { View, Text, Switch, TouchableOpacity } from 'react-native';
import t from 'tcomb-form-native';
import Strings from '../config/strings.js';

var Component = t.form.Component;

class TermsSwitch extends Component {

  constructor (props) {
    super(props);
    var locals = super.getLocals();
  }

  getLocals () {
    var locals = super.getLocals();
    return locals;
  }

  getTemplate () {
    return function (locals) {
      var stylesheet = locals.stylesheet;
      var formGroupStyle = stylesheet.formGroup.normal;
      var controlLabelStyle = stylesheet.controlLabel.normal;
      var checkboxStyle = stylesheet.checkbox.normal;
      var helpBlockStyle = stylesheet.helpBlock.normal;
      var errorBlockStyle = stylesheet.errorBlock;

      if (locals.hasError) {
        formGroupStyle = stylesheet.formGroup.error;
        controlLabelStyle = stylesheet.controlLabel.error;
        checkboxStyle = stylesheet.checkbox.error;
        helpBlockStyle = stylesheet.helpBlock.error;
      }

      var label = locals.label ? <Text style={controlLabelStyle}>{locals.label}</Text> : null;
      var help = locals.help ? <Text style={helpBlockStyle}>{locals.help}</Text> : null;
      var error = locals.hasError && locals.error ? <Text accessibilityLiveRegion="polite" style={[errorBlockStyle, {marginTop: 2}]}>{locals.error}</Text> : null;

      return (
        <View style={formGroupStyle}>
          {label}
          <View style={{flexDirection: 'row', alignItems: 'center'}}>
            <View style={{flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center'}}>
              <Text style={{fontSize: 14}}>Jag har läst och accepterar </Text>
              <TouchableOpacity onPress={() => locals.config.onPressTerms()}>
                <Text style={{fontStyle: 'italic', fontSize: 14, textDecorationLine: 'underline'}}>villkoren</Text>
              </TouchableOpacity>
            </View>
            <View style={{flex: 1, flexDirection: 'column', justifyContent: 'center', paddingTop: 6}}>
              <Switch
                accessibilityLabel={locals.label}
                ref="input"
                disabled={locals.disabled}
                onTintColor={locals.onTintColor}
                thumbTintColor={locals.thumbTintColor}
                tintColor={locals.tintColor}
                style={checkboxStyle}
                onValueChange={(value) => locals.onChange(value)}
                value={locals.value} />
            </View>
          </View>
          {help}
          {error}
        </View>
      );
    }
  }
}

export default TermsSwitch

And then use your factory like:

const options = {
    fields: {
        your_switch: {
          config: {
            onPressTerms: () => {
              ...
            },
          },
          factory: TermsSwitch,
          stylesheet: stylesheet,
        },
        ...
    },
}

I hope this can help you!

Good luck!

I have made a custom switch in react native and You can do the styling in it a source code is given below -

import React from 'react'
import { Text, TouchableOpacity } from 'react-native'
import styled from 'styled-components/native'

class App extends React.Component {
  state = {
    active: false
  }
  handleOFF = () => {
    this.setState({
      active: false
    });

  }

  handleOn = () => {
    this.setState({
      active: true
    });
  }

  render() {
    return (
      <MainView>
        <Label>
          <LabelOff onPress={this.handleOFF} active={this.state.active} activeOpacity={0.8}>
            <Off>OFF</Off>
          </LabelOff>
          <LabelOn onPress={this.handleOn} active={this.state.active} activeOpacity={0.8}>
            <On>ON</On>
          </LabelOn>
        </Label>
      </MainView>
    )
  }
}


const MainView = styled.View`
  margin:50px;
`
const Label = styled.View`
  height:60px;
  width:240px;
  flex-direction:row;
  justify-content:space-around;
  align-items:center;
  background-color:transparent;
`

const LabelOff = styled.TouchableOpacity`
  height:60px;
  width:120px;
  background-color:${props => props.active ? 'transparent' : '#cb6161'};
  border:2px solid #cb6161;
  border-right-width:0px;
  align-items:center;
  justify-content:space-around;
`
const LabelOn = styled.TouchableOpacity`
  height:60px;
  width:120px;
  background-color:${props => props.active ? '#55acee' : 'transparent'};
  border:2px solid #55acee;
  border-left-width:0px;
  align-items:center;
  justify-content:space-around;
`
const Off = styled.Text`
  font-size:22px;
`
const On = styled.Text`
  font-size:22px;
`
export default App 

Custom switch is done !