On iOS, you can nest views within your Text component. Here's an example:
-
import React, { Component } from'react';
-import { AppRegistry, Text, View } from'react-native';
-
-exportdefaultclassBlueIsCoolextendsComponent{
- render() {
- return (
- <Text>
- There is a blue square
- <Viewstyle={{width:50, height:50, backgroundColor: 'steelblue'}} />
- in between my text.
- </Text>
- );
- }
-}
-
-// skip this line if using Create React Native App
-AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
-
-
-
-
In order to use this feature, you must give the view a width and a height.
-
Containers
The <Text> element is special relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line.
On iOS, you can nest views within your Text component. Here's an example:
-
import React, { Component } from'react';
-import { AppRegistry, Text, View } from'react-native';
-
-exportdefaultclassBlueIsCoolextendsComponent{
- render() {
- return (
- <Text>
- There is a blue square
- <Viewstyle={{width:50, height:50, backgroundColor: 'steelblue'}} />
- in between my text.
- </Text>
- );
- }
-}
-
-// skip this line if using Create React Native App
-AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
-
-
-
-
In order to use this feature, you must give the view a width and a height.
-
Containers
The <Text> element is special relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line.
Once you have your React Native project initialized, you can run react-native run-ios inside the newly created project directory. If everything is set up correctly, you should see your new app running in the iOS Simulator shortly.
Specifying a device
-
You can specify the device the simulator should run with the --simulator flag, followed by the device name as a string. The default is "iPhone 6". If you wish to run your app on an iPhone 4s, just run react-native run-ios --simulator="iPhone 4s".
+
You can specify the device the simulator should run with the --simulator flag, followed by the device name as a string. The default is "iPhone X". If you wish to run your app on an iPhone 4s, just run react-native run-ios --simulator="iPhone 4s".
The device names correspond to the list of devices available in Xcode. You can check your available devices by running xcrun simctl list devices from the console.
Once you have your React Native project initialized, you can run react-native run-ios inside the newly created project directory. If everything is set up correctly, you should see your new app running in the iOS Simulator shortly.
Specifying a device
-
You can specify the device the simulator should run with the --simulator flag, followed by the device name as a string. The default is "iPhone 6". If you wish to run your app on an iPhone 4s, just run react-native run-ios --simulator="iPhone 4s".
+
You can specify the device the simulator should run with the --simulator flag, followed by the device name as a string. The default is "iPhone X". If you wish to run your app on an iPhone 4s, just run react-native run-ios --simulator="iPhone 4s".
The device names correspond to the list of devices available in Xcode. You can check your available devices by running xcrun simctl list devices from the console.