Add Divider/Separator component

I usually use them on Flatlists as separators.

Some examples I found now in my apps:

<View s={{ alignSelf: 'stretch', marginHorizontal: '10%', height: StyleSheet.hairlineWidth, backgroundColor: '#0005' }}/>
<View s={{ height: StyleSheet.hairlineWidth * 2, alignSelf: 'stretch', marginHorizontal: 24, backgroundColor: '#eee' }}/>
<View s={{ alignSelf: 'stretch', marginHorizontal: 20, height: StyleSheet.hairlineWidth, backgroundColor: '#aaa' }}/>
<View s={{ backgroundColor: '#555', height: StyleSheet.hairlineWidth, alignSelf: 'stretch', marginHorizontal: 20, marginVertical: 8 }}/>
<View style={{ height: StyleSheet.hairlineWidth, alignSelf: 'stretch', backgroundColor: '#aaa', marginHorizontal: 16 }}/>
<View style={{ backgroundColor: '#d5d5d5', height: StyleSheet.hairlineWidth * 2, alignSelf: 'stretch', marginHorizontal: 24 }}/>

There were also many times where the FlatList separator was just a View with a height or width, without a color.

Looks like it will be something like

type SeparatorProps = ViewProps & {
  transparent?: true;
  color?: ColorValue;
  row?: true; // or vertical? +1 row as we use this keyword at other components
  width?: number | string;
  height?: number | string;
  /** Same axis margin */
  margin?: number | string;
  /** Multiple of StyleSheet.hairlineWidth */
  thickness?: number
}
<Separator transparent row margin={10} color='#0005' />

I prefer separator over divider as FlatList uses Divider. However, the UI Kits uses Divider, so maybe would be good to keep some consistency. But, ain't here to follow patterns ;)

UI Kits Refs: https://reactnativeelements.com/docs/components/divider https://callstack.github.io/react-native-paper/divider.html

SrBrahma / react-native-gev

Add Divider/Separator component #17