fix(Toast): 修复 Toast 在 demo 上不能正常显示 fix #143 (#169)

* doc: edit layout

* component: add steps component

* edit doc clash

* doc: add steps doc

* component: add timeLine component

* doc: add timeLine doc

* doc: edit steps doc

* fix: 修复toast在demo上不能正常显示 fix #143

Author: yaob421123

example/examples/src/App.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {NavigationContainer} from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
 import {SafeAreaView, StatusBar, StyleSheet} from 'react-native';
+import { RootSiblingParent } from 'react-native-root-siblings';
 
 import {stackPageData} from './routes';
 
@@ -15,34 +16,36 @@ const styles = StyleSheet.create({
 
 const App = () => {
   return (
-    <SafeAreaView style={styles.block}>
-      <StatusBar barStyle="dark-content" />
-      <NavigationContainer>
-        <Stack.Navigator initialRouteName="Home">
-          <Stack.Screen
-            name="Home"
-            component={require('./Home').default}
-            options={{
-              headerTitle: 'Home',
-              // header: () => null,
-            }}
-          />
-          {stackPageData.map((props: any, index: number) => {
-            return (
-              <Stack.Screen
-                key={index}
-                {...props}
-                // name="Home"
-                // options={{
-                //   header: () => null
-                // }}
-                // component={Home}
-              />
-            );
-          })}
-        </Stack.Navigator>
-      </NavigationContainer>
-    </SafeAreaView>
+    <RootSiblingParent>
+      <SafeAreaView style={styles.block}>
+        <StatusBar barStyle="dark-content" />
+        <NavigationContainer>
+          <Stack.Navigator initialRouteName="Home">
+            <Stack.Screen
+              name="Home"
+              component={require('./Home').default}
+              options={{
+                headerTitle: 'Home',
+                // header: () => null,
+              }}
+            />
+            {stackPageData.map((props: any, index: number) => {
+              return (
+                <Stack.Screen
+                  key={index}
+                  {...props}
+                  // name="Home"
+                  // options={{
+                  //   header: () => null
+                  // }}
+                  // component={Home}
+                />
+              );
+            })}
+          </Stack.Navigator>
+        </NavigationContainer>
+      </SafeAreaView>
+    </RootSiblingParent>
   );
 };
 

packages/core/README.md

@@ -35,7 +35,7 @@ A UI component library based on React Native (Android & iOS).
 ## Install
 
 ```bash
-yarn add @uiw/react-native react-native-svg
+yarn add @uiw/react-native react-native-svg  react-native-root-siblings
 ```
 
 ## Basic Usage

packages/core/src/Toast/README.md

@@ -3,6 +3,21 @@ Toast 轻提示
 
 一种轻量级反馈/提示，可以用来显示不会打断用户操作的内容，适合用于页面转场、数据交互的等场景中。
 
+组件基于[`react-native-root-siblings`](https://github.com/magicismight/react-native-root-siblings) 插件开发， 当 `react native >= 0.62` 时，需要在程序中插入一个装入容器
+
+
+```jsx
+import { RootSiblingParent } from 'react-native-root-siblings';
+
+export default () => {
+  return (
+    <RootSiblingParent>
+      <App />
+    </RootSiblingParent>
+  )
+}
+```
+
 ## 基础示例
 
 ```jsx