The selected index can be changed on the fly by assigning the selectedIndex prop to a state variable, then changing that variable. Note that the state variable would need to be updated as the user selects a value and changes the index, as shown in the example below.
<SegmentedControlIOS
- values={['One', 'Two']}
- selectedIndex={this.state.selectedIndex}
- onChange={(event) => {
- this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex});
- }}
-/>
-Inherits View Props.
@@ -98,7 +135,6 @@
momentaryIf true, then selecting a segment won't persist visually. The onValueChange callback will still work as expected.
onChangeCallback that is called when the user taps a segment; passes the event as an argument
@@ -155,7 +190,6 @@
valuesThe labels for the control's segment buttons, in order.
diff --git a/docs/0.61/segmentedcontrolios/index.html b/docs/0.61/segmentedcontrolios/index.html index 797c01fc3a4..98015804125 100644 --- a/docs/0.61/segmentedcontrolios/index.html +++ b/docs/0.61/segmentedcontrolios/index.html @@ -75,16 +75,53 @@The selected index can be changed on the fly by assigning the selectedIndex prop to a state variable, then changing that variable. Note that the state variable would need to be updated as the user selects a value and changes the index, as shown in the example below.
<SegmentedControlIOS
- values={['One', 'Two']}
- selectedIndex={this.state.selectedIndex}
- onChange={(event) => {
- this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex});
- }}
-/>
-Inherits View Props.
@@ -98,7 +135,6 @@momentaryIf true, then selecting a segment won't persist visually. The onValueChange callback will still work as expected.
onChangeCallback that is called when the user taps a segment; passes the event as an argument
@@ -155,7 +190,6 @@valuesThe labels for the control's segment buttons, in order.
diff --git a/docs/next/images.html b/docs/next/images.html index 5e7e07886e7..9e14eca3f66 100644 --- a/docs/next/images.html +++ b/docs/next/images.html @@ -113,7 +113,7 @@Note that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set { width: undefined, height: undefined } on the style attribute.
The require syntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including .mp3, .wav, .mp4, .mov, .html and .pdf. See packager defaults for the full list.
You can add support for other types by adding an assetExts resolver option in your Metro configuration.
You can add support for other types by adding an assetExts resolver option in your Metro configuration.
A caveat is that videos must use absolute positioning instead of flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/next/images/index.html b/docs/next/images/index.html index 5e7e07886e7..9e14eca3f66 100644 --- a/docs/next/images/index.html +++ b/docs/next/images/index.html @@ -113,7 +113,7 @@Note that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set { width: undefined, height: undefined } on the style attribute.
The require syntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including .mp3, .wav, .mp4, .mov, .html and .pdf. See packager defaults for the full list.
You can add support for other types by adding an assetExts resolver option in your Metro configuration.
You can add support for other types by adding an assetExts resolver option in your Metro configuration.
A caveat is that videos must use absolute positioning instead of flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/next/navigation.html b/docs/next/navigation.html index 26a47a4ddc4..41b40828dba 100644 --- a/docs/next/navigation.html +++ b/docs/next/navigation.html @@ -104,9 +104,7 @@ pod install export default function App() { return ( - <NavigationContainer> - {/* Rest of your app code */} - </NavigationContainer> + <NavigationContainer>{/* Rest of your app code */}</NavigationContainer> ); } @@ -125,10 +123,10 @@ pod install <Stack.Navigator> <Stack.Screen name="Home" - component={Home} + component={HomeScreen} options={{title: 'Welcome'}} /> - <Stack.Screen name="Profile" component={Profile} /> + <Stack.Screen name="Profile" component={ProfileScreen} /> </Stack.Navigator> </NavigationContainer> ); @@ -145,6 +143,9 @@ pod install /> ); } +function ProfileScreen() { + return <Text>This is Jane's profile</Text>; +}The views in the stack navigator use native components and the Animated library to deliver 60fps animations that are run on the native thread. Plus, the animations and gestures can be customized.
React Navigation also has packages for different kind of navigators such as tabs and drawer. You can use them to implement various patterns in your app.
diff --git a/docs/next/navigation/index.html b/docs/next/navigation/index.html index 26a47a4ddc4..41b40828dba 100644 --- a/docs/next/navigation/index.html +++ b/docs/next/navigation/index.html @@ -104,9 +104,7 @@ pod install export default function App() { return ( - <NavigationContainer> - {/* Rest of your app code */} - </NavigationContainer> + <NavigationContainer>{/* Rest of your app code */}</NavigationContainer> ); } @@ -125,10 +123,10 @@ pod install <Stack.Navigator> <Stack.Screen name="Home" - component={Home} + component={HomeScreen} options={{title: 'Welcome'}} /> - <Stack.Screen name="Profile" component={Profile} /> + <Stack.Screen name="Profile" component={ProfileScreen} /> </Stack.Navigator> </NavigationContainer> ); @@ -145,6 +143,9 @@ pod install /> ); } +function ProfileScreen() { + return <Text>This is Jane's profile</Text>; +}The views in the stack navigator use native components and the Animated library to deliver 60fps animations that are run on the native thread. Plus, the animations and gestures can be customized.
React Navigation also has packages for different kind of navigators such as tabs and drawer. You can use them to implement various patterns in your app.
diff --git a/docs/next/out-of-tree-platforms.html b/docs/next/out-of-tree-platforms.html index a6c1fff876c..e245898769e 100644 --- a/docs/next/out-of-tree-platforms.html +++ b/docs/next/out-of-tree-platforms.html @@ -77,6 +77,7 @@Right now the process of creating a React Native platform from scratch is not very well documented - one of the goals of the upcoming re-architecture (Fabric) is to make maintaining a platform easier.
diff --git a/docs/next/out-of-tree-platforms/index.html b/docs/next/out-of-tree-platforms/index.html index a6c1fff876c..e245898769e 100644 --- a/docs/next/out-of-tree-platforms/index.html +++ b/docs/next/out-of-tree-platforms/index.html @@ -77,6 +77,7 @@Right now the process of creating a React Native platform from scratch is not very well documented - one of the goals of the upcoming re-architecture (Fabric) is to make maintaining a platform easier.
diff --git a/docs/next/share.html b/docs/next/share.html index 08e8f5662d3..a337eeb2f81 100644 --- a/docs/next/share.html +++ b/docs/next/share.html @@ -209,16 +209,16 @@ export default ShareExample;dialogTitlesharedAction()static sharedAction()
+sharedAction
+static sharedAction
The content was successfully shared.
-dismissedAction()
-static dismissedAction()
+dismissedAction
+static dismissedAction
iOS Only. The dialog has been dismissed.
-