rn_hexagon.js

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

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-elements'; // Version can be specified in package.json

const sides = [1, 2, 3, 4, 5, 6];

const Hexagon = ({ r }) => {
  const d = r / Math.cos((60.0 * Math.PI) / 180.0);
  const large = (2 * r) / Math.sin((60.0 * Math.PI) / 180.0);
  console.log({ large });
  return (
    <View
      style={{
        width: 2 * r,
        height: 2 * r,
         marginTop: 100,
         marginLeft: 100,
        position: "relative"
      }}>
      {sides.map(index => {
        return (
          <View
            key={index}
            style={{
              position: 'absolute',
              borderWidth: 1,
              width: large,
              height: 4,
              borderColor: 'red',
              transform: [{ rotateZ: `${60 * index}deg` }, { translateY: d }],
            }}
          />
        );
      })}
      {sides.map(index => {
        return (
          <View
            key={index}
            style={{
              position: 'absolute',
              borderWidth: 1,
              width: large * 1.1,
              height: 4,
              borderColor: 'red',
              transform: [
                { rotateZ: `${60 * index}deg` },
                { translateY: d * 1.1 },
              ],
            }}
          />
        );
      })}
    </View>
  );
};

export default class App extends Component {
  state = {
    value: 20,
  };

  render() {
    return (
      <View style={{ paddingTop: 100, flex: 1, display: "flex", position: "relative" }}>
        <Slider
          style={{ width: 250 }}
          minimumValue={20}
          maximumValue={100}
          value={this.state.value}
          onValueChange={newVal => this.setState({ value: newVal })}
        />
        <Hexagon r={this.state.value} />
      </View>
    );
  }
}