React and React Native part 3

Transpiling JSX
The View in React Native
Text component
Dealing with Images
Styles
Inline styles
A Button
Image picker and image sharing

Transpiling JSX

Browsers can’t understand JSX directly. React uses compilers like Babel or TypeScript to transform JSX code into regular JavaScript.

Toolkits like create-React-app or Next.js include a JSX transpiling.

Example: The transpiling of JSX:

import React from 'react';
 
function App() {
  return <h1>Hello World</h1>;
}

Will convert to:

import React from 'react';
 
function App() {
  return /*#__PURE__*/React.createElement("h1", null, "Hello World");
}

Note: Transpiling is transforming the source code written in one language and into another language.

The View in React Native

The view is a container.

It maps directly to the native view to whatever platform the React Native app is running on.

View is designed to be nested inside other views and can have 0 to many children of any type.

Views are designed to be used with StyleSheet, although inline styles are also supported.

Learn more about View Props.

There are many view props. Some of them are for Android exclusively, some are for IOS, but mostly for both.

Note: React Native currently supports both iOS and Android, and has the potential to expand to future platforms as well.

To inject a view inside your app you need to have this line inside JSX:

import { View } from 'react-native'

Text component

If you plan to show the text in React native you should use the Text component.

This is probably the first component you will use.

import { Text } from 'react-native'

Dealing with Images

If you plan to show the image in React native you should use the Image component.

But the image won’t be visible if you don’t explicitly specify a width and height.

import React from 'react';
import { Image,  StyleSheet, Text, View } from 'react-native';
import logo from './assets/logo.png';
 
export default function App() {
  return (
    <View style={styles.container}>
      <Image source={logo} style={ { width: 305, height: 159 } } />
 
      <Text style={ {color: '#888', fontSize: 18} }>
        To share a photo from your phone with a friend, just press the button below!
      </Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

You can load an image directly from URL if you use Image source attribute like this:

import React from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
 
export default function App() {
  return (
    <View style={styles.container}>
      <Image source={ { uri: "https://i.imgur.com/TkIrScD.png" } } style={ { width: 305, height: 199 } } />
   
      <Text style={ {color: '#888', fontSize: 18} }>
        To share a photo from your phone with a friend, just press the button below!
      </Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#bac',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Styles

You create styles variables to represent the styles. You can add View attribute style={styles.container}:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
 
export default function App() {
  return (
    <View style={styles.container}>
      <Text>To share a photo from your phone with a friend, just press the button below!</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#bac',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Inline styles

The example with inline styles use { {} } double brackets set on a Text component:

{ {color: '#888', fontSize: 18} }

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
 
export default function App() {
  return (
    <View style={styles.container}>
      <Text style={ {color: '#888', fontSize: 18} }>
        To share a photo from your phone with a friend, just press the button below!
      </Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#bac',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
 

A Button

You can use TouchableOpacity for the button in React native.

TouchableOpacity increases the lightness of a button when touched while TouchableHighlight increases the darkness of a button when touched.

TouchableHighlight adds a view to the view hierarchy and TouchableOpacity works without changing the view hierarchy.

If you like you can use React Native Elements Button as well.

import React from 'react';
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
export default function App() {
  return (
    <View style={styles.container}>
      <Image source={ { uri: 'https://i.imgur.com/TkIrScD.png' } } style={styles.logo} />
      <Text style={styles.instructions}>
        To share a photo from your phone with a friend, just press the button below!
      </Text>
 
      <TouchableOpacity onPress={() => alert('Hello')} style={styles.button}>
        <Text style={styles.buttonText}>Pick a photo</Text>
      </TouchableOpacity>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  logo: {
    width: 305,
    height: 159,
    marginBottom: 20,
  },
  instructions: {
    color: '#888',
    fontSize: 18,
    marginHorizontal: 15,
    marginBottom: 10,
  },
  button: {
    backgroundColor: "blue",
    padding: 20,
    borderRadius: 5,
  },
  buttonText: {
    fontSize: 20,
    color: '#fff',
  },
});

React native does not provide perfect image picker and image sharing.

The solution is to install and use:

expo-image-picker and
expo-sharing

import * as ImagePicker from 'expo-image-picker';
import * as Sharing from 'expo-sharing';

…

tags: react-native - react & category: javascript