cleanup LayoutAnimation example (#494)

Author: sgny

reason-react-native/src/apis/LayoutAnimation.md

@@ -1,7 +1,6 @@
 ---
 id: apis/LayoutAnimation
 title: LayoutAnimation
-wip: false
 ---
 
 `LayoutAnimation` API offers a simpler alternative to `Animated` API. Instead of directly manipulating values for various style props, it suffices to specify the animation to be run before the next render. Specification of the animation should happen in the reducer, before `state` is updated.
@@ -19,7 +18,6 @@ configureNext(layoutAnimationConfig)
 configureNextWithEndCallback(layoutAnimationConfig, callback)
 ```
 
-
 ## Types
 
 `layoutAnimationConfig` can be created with the `layoutAnimationConfig` constructor
@@ -52,7 +50,6 @@ create:
 ```
 
 
-
 `animationConfig` can in turn be created with the `animationConfig` constructor
 
 ```reason
@@ -76,8 +73,6 @@ animationConfig:
   )
 ```
 
-
-
 ## Presets
 
 There are presets for `linear`, `spring` and `easeInEaseOut` transitions which allow a very straightforward way to setup animation. Presets may either be passed as ready-made `layoutAnimationConfig` to `configureNext` and `configureNextWithEndCallback` as below
@@ -92,8 +87,6 @@ LayoutAnimation.spring()
 
 ```
 
-
-
 ## Example
 
 The example below illustrates animated transition (`spring`) between two views, such as registration and login forms. Animation is specified in the reducer, as below. Making use of `presets` is also illustrated (commented out).
@@ -109,6 +102,14 @@ type state = {register: bool};
 type action =
   | ToggleRegister;
 
+let styles =
+  Style.(
+    StyleSheet.create({
+      "container": style(~flex=1., ~flexDirection=`column, ()),
+      "screen": style(~width=pt(windowWidth), ()),
+    })
+  );
+
 [@react.component]
 let make = () => {
   let (state, dispatch) =
@@ -130,28 +131,26 @@ let make = () => {
       {register: false},
     );
 
-  <View style={Style.style(~flex=1., ~flexDirection=`column, ())}>
+  <View style=styles##container>
     <View
-      style={Style.style(
-        ~flex=1.,
-        ~width=Style.pt(2.0 *. windowWidth),
-        ~left=
-          Style.pt(
-            if (state.register) {
-              0.;
-            } else {
-              0. -. windowWidth;
-            },
-          ),
-        ~flexDirection=`row,
-        (),
-      )}>
-      <View style={Style.style(~width=Style.pt(windowWidth), ())}>
-        <Register />
-      </View>
-      <View style={Style.style(~width=Style.pt(windowWidth), ())}>
-        <Login />
-      </View>
+      style=Style.(
+        {style(
+           ~flex=1.,
+           ~width=pt(2.0 *. windowWidth),
+           ~left=
+             pt(
+               if (state.register) {
+                 0.;
+               } else {
+                 0. -. windowWidth;
+               },
+             ),
+           ~flexDirection=`row,
+           (),
+         )}
+      )>
+      <View style=styles##screen> <Register /> </View>
+      <View style=styles##screen> <Login /> </View>
     </View>
     <Button onPress={_ => dispatch(ToggleRegister)} title={js|Toggle|js} />
   </View>;