Refactor imports exports (#135)

* Refactor import along with exports

* Change imports in example

* Fix flow

Author: lukewalczak

example/SliderExample.js

@@ -10,10 +10,11 @@
 
 'use strict';
 
-const React = require('react');
-const {Text, StyleSheet, View} = require('react-native');
-const Slider = require('@react-native-community/slider');
+import React from 'react';
+import {Text, StyleSheet, View} from 'react-native';
+import Slider from '@react-native-community/slider';
 
+import type {Element} from 'react';
 class SliderExample extends React.Component<$FlowFixMeProps, $FlowFixMeState> {
   static defaultProps = {
     value: 0,
@@ -113,43 +114,43 @@ exports.description = 'Slider input for numeric values';
 exports.examples = [
   {
     title: 'Default settings',
-    render(): React.Element<any> {
+    render(): Element<any> {
       return <SliderExample />;
     },
   },
   {
     title: 'Initial value: 0.5',
-    render(): React.Element<any> {
+    render(): Element<any> {
       return <SliderExample value={0.5} />;
     },
   },
   {
     title: 'minimumValue: -1, maximumValue: 2',
-    render(): React.Element<any> {
+    render(): Element<any> {
       return <SliderExample minimumValue={-1} maximumValue={2} />;
     },
   },
   {
     title: 'step: 0.25',
-    render(): React.Element<any> {
+    render(): Element<any> {
       return <SliderExample step={0.25} />;
     },
   },
   {
     title: 'onSlidingStart',
-    render(): React.Element<any> {
+    render(): Element<any> {
       return <SlidingStartExample />;
     },
   },
   {
     title: 'onSlidingComplete',
-    render(): React.Element<any> {
+    render(): Element<any> {
       return <SlidingCompleteExample />;
     },
   },
   {
     title: 'Custom min/max track tint color',
-    render(): React.Element<any> {
+    render(): Element<any> {
       return (
         <SliderExample
           minimumTrackTintColor={'blue'}
@@ -161,27 +162,27 @@ exports.examples = [
   },
   {
     title: 'Custom thumb tint color',
-    render(): React.Element<any> {
+    render(): Element<any> {
       return <SliderExample thumbTintColor={'blue'} />;
     },
   },
   {
     title: 'Custom thumb image',
-    render(): React.Element<any> {
+    render(): Element<any> {
       return <SliderExample thumbImage={require('./uie_thumb_big.png')} />;
     },
   },
   {
     title: 'Custom track image',
     platform: 'ios',
-    render(): React.Element<any> {
+    render(): Element<any> {
       return <SliderExample trackImage={require('./slider.png')} />;
     },
   },
   {
     title: 'Custom min/max track image',
     platform: 'ios',
-    render(): React.Element<any> {
+    render(): Element<any> {
       return (
         <SliderExample
           minimumTrackImage={require('./slider-left.png')}
@@ -192,7 +193,7 @@ exports.examples = [
   },
   {
     title: 'Inverted slider direction',
-    render(): React.Element<any> {
+    render(): Element<any> {
       return <SliderExample value={0.6} inverted />;
     },
   },

example/package.json

@@ -3,7 +3,7 @@
   "name": "example",
   "version": "0.0.1",
   "scripts": {
-    "start": "node node_modules/react-native/local-cli/cli.js start",
+    "start": "node ../node_modules/react-native/local-cli/cli.js start",
     "run:android": "react-native run-android",
     "run:ios": "react-native run-ios"
   },

src/js/RNCSliderNativeComponent.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-const {requireNativeComponent} = require('react-native');
+import {requireNativeComponent} from 'react-native';
 
 import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
 import type {ImageSource} from 'react-native/Libraries/Image/ImageSource';
@@ -50,4 +50,7 @@ type NativeProps = $ReadOnly<{|
 
 type RNCSliderType = Class<NativeComponent<NativeProps>>;
 
-module.exports = ((requireNativeComponent('RNCSlider'): any): RNCSliderType);
+const RNCSliderNativeComponent = ((requireNativeComponent(
+  'RNCSlider',
+): any): RNCSliderType);
+export default RNCSliderNativeComponent;

src/js/Slider.js

@@ -10,10 +10,11 @@
 
 'use strict';
 
-const React = require('react');
-const {Image, Platform, StyleSheet} = require('react-native');
-const RCTSliderNativeComponent = require('./RNCSliderNativeComponent');
+import React from 'react';
+import {Image, Platform, StyleSheet} from 'react-native';
+import RCTSliderNativeComponent from './RNCSliderNativeComponent';
 
+import type {Ref} from 'react';
 import type {NativeComponent} from 'react-native/Libraries/Renderer/shims/ReactNative';
 import type {ImageSource} from 'react-native/Libraries/Image/ImageSource';
 import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
@@ -208,9 +209,9 @@ type Props = $ReadOnly<{|
  *```
  *
  */
-const Slider = (
+const SliderComponent = (
   props: Props,
-  forwardedRef?: ?React.Ref<typeof RCTSliderNativeComponent>,
+  forwardedRef?: ?Ref<typeof RCTSliderNativeComponent>,
 ) => {
   const style = StyleSheet.compose(
     styles.slider,
@@ -266,7 +267,7 @@ const Slider = (
   );
 };
 
-const SliderWithRef = React.forwardRef(Slider);
+const SliderWithRef = React.forwardRef(SliderComponent);
 
 /* $FlowFixMe(>=0.89.0 site=react_native_fb) This comment suppresses an error
  * found when Flow v0.89 was deployed. To see the error, delete this comment
@@ -296,4 +297,5 @@ if (Platform.OS === 'ios') {
 /* $FlowFixMe(>=0.89.0 site=react_native_fb) This comment suppresses an error
  * found when Flow v0.89 was deployed. To see the error, delete this comment
  * and run Flow. */
-module.exports = (SliderWithRef: Class<NativeComponent<Props>>);
+const Slider = (SliderWithRef: Class<NativeComponent<Props>>);
+export default Slider;