Docs/migrating components docs from rebolt (facebook#285)

Finalising components docs migration from rebolt to bs-react-native

issue facebook#267

docs/css/custom.css

@@ -5,8 +5,16 @@ dt#type-calculated {
 }
 
 #module-type-FlatListComponent,
+#module-type-ViewComponent,
+#module-type-Impl,
 #module-type-ImageComponent,
+#module-type-ScrollViewComponent,
 #module-CreateComponent, 
+#module-type-TextComponent,
+#type-renderBag,
+#type-t,
+#type-renderAccessory,
+#type-viewToken,
 #module-CreateComponent ~ article summary,
 #module-CreateComponent ~ div summary
 {

docs/pages/page-status.mld

@@ -14,6 +14,7 @@ Please find the list of available components and APIs below.
 - {{:KeyboardAvoidingView-BsReactNative} [KeyboardAvoidingView]}
 - {!ListView}
 - {!MapView}
+- {{:MaskedViewIOS-BsReactNative} [MaskedViewIOS]}
 - {{:Modal-BsReactNative} [Modal]}
 - {{:Picker-BsReactNative} [Picker]}
 - {{:PickerIOS-BsReactNative} [PickerIOS]}
@@ -33,7 +34,7 @@ Please find the list of available components and APIs below.
 - {{:TextInput-BsReactNative} [TextInput]}
 - {!ToolbarAndroid}
 - {{:TouchableHighlight-BsReactNative} [TouchableHighlight]}
-- {{:TouchableWithoutFeedback-BsReactNative} [TouchableNativeFeedback]}
+- {{:TouchableNativeFeedback-BsReactNative} [TouchableNativeFeedback]}
 - {{:TouchableOpacity-BsReactNative} [TouchableOpacity]}
 - {{:TouchableWithoutFeedback-BsReactNative} [TouchableWithoutFeedback]}
 - {{:View-BsReactNative} [View]}

src/components/imageBackground.rei

@@ -1,7 +1,4 @@
-/**
-  [ImageBackground] component has the same props as {{:\BsReactNative/Image-BsReactNative} [Image] component}
-  You can read more on ImageBackground component usage in official docs: {{:https://facebook.github.io/react-native/docs/images}}
-*/
+
 
 module Event: {
   type error;
@@ -11,6 +8,11 @@ module Event: {
   };
 };
 
+/**
+  [ImageBackground] component has the same props as {{:\BsReactNative/Image-BsReactNative} [Image] component}
+  You can read more on ImageBackground component usage in official docs: {{:https://facebook.github.io/react-native/docs/images}}
+*/
+
 let make:
   (
     ~onError: Event.error => unit=?,

src/components/maskedViewIOS.rei

@@ -1,3 +1,55 @@
+/**
+  Renders the child view with a mask specified in the [maskElement] prop
+
+  {3 Example of use}
+  The following example demonstrates rendering a View with red background behind a mask, defined as a [Basic mask] string.
+  {[
+    let component = ReasonReact.statelessComponent("MyComponent");
+
+    let make = _children => {
+      ...component,
+      render: _self =>
+        <MaskedViewIOS
+          maskElement={
+            <View
+              style=Style.(
+                      style([
+                        flex(1.),
+                        justifyContent(Center),
+                        alignItems(Center),
+                        backgroundColor(String("transparent")),
+                      ])
+                    )>
+              <Text
+                style=Style.(
+                        style([
+                          fontSize(Float(50.0)),
+                          color(String("black")),
+                          fontWeight(`_700),
+                        ])
+                      )>
+                (ReasonReact.string("Basic mask"))
+              </Text>
+            </View>
+          }>
+            <View
+              style=Style.(style([flex(1.), backgroundColor(String("red"))]))
+            />
+          </MaskedViewIOS>,
+    };
+  ]}
+
+  You can read more on MaskedViewIOS component usage in official docs: {{:https://facebook.github.io/react-native/docs/maskedviewios}}
+
+  {4 Props}
+
+  All {{:\BsReactNative/View-BsReactNative} [View] props} are accepted.
+
+  {4 maskElement}
+  {[~maskElement: ReasonReact.reactElement]}
+
+*/
+
 let make:
   (
     ~maskElement: ReasonReact.reactElement,
@@ -54,4 +106,4 @@ let make:
     ReasonReact.stateless,
     ReasonReact.noRetainedProps,
     ReasonReact.actionless,
-  );
+  );

src/components/refreshControl.rei

@@ -1,3 +1,47 @@
+/**
+{3 Example of use}
+You can read more on RefreshControl component usage in official docs: {{:https://facebook.github.io/react-native/docs/refreshcontrol}}
+
+{3 Props}
+{4 onRefresh}
+{[
+  onRefresh: unit => unit=?
+]}
+{4 refreshing}
+{[
+  ~refreshing: bool=?,
+]}
+{4 colors}
+{[
+  ~colors: array(string)=?,
+]}
+{4 enabled}
+{[
+  ~enabled: bool=?,
+]}
+{4 progressBackgroundColor}
+{[
+  ~progressBackgroundColor: string=?,
+]}
+{4 progressViewOffset}
+{[
+  ~progressViewOffset: float=?,
+]}
+{4 tintColor}
+{[
+  ~tintColor: string=?,
+]}
+{4 title}
+{[
+  ~title: string=?,
+]}
+{4 titleColor}
+{[
+  ~titleColor: string=?,
+]}
+All other {{:\BsReactNative/View-BsReactNative} [View] props}
+*/
+
 let make:
   (
     ~onRefresh: unit => unit=?,
@@ -62,4 +106,4 @@ let make:
     ReasonReact.stateless,
     ReasonReact.noRetainedProps,
     unit,
-  );
+  );

src/components/safeAreaView.rei

@@ -1 +1,9 @@
-include View.ViewComponent;
+/**  
+  The purpose of [SafeAreaView] is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later.
+
+  [SafeAreaView] renders nested content and automatically applies paddings to reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly,Safe Area's paddings reflect the physical limitation of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone X).
+  You can read more on SafeAreaView component usage in official docs: {{:https://facebook.github.io/react-native/docs/maskedviewios}}
+
+  {{:\BsReactNative/View-BsReactNative} [View] props}
+ */
+include View.ViewComponent;