Category: React Native Answers

To get the platform the app is running on with React Native, we use the Platform.OS property.

For instance, we write

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  height: Platform.OS === 'ios' ? 200 : 100
});

to use the Platform.OS property to check if the platform is 'ios‘ when setting the height style.

To set the port of a React Native app, we can set the port option when we run our app.

From the command line, we run

react-native start --port 9988

to set the port to 9988

In package.json, we can add the port by writing

{
  "scripts": { "start": "react-native start --port 9988" }
}

to add the port option into the start script.

To make a React Native app portrait only, we change our app’s manifest.xml.

For instance, we write

<activity
  android:name=".MainActivity"
  android:configChanges="orientation"
  android:screenOrientation="portrait"
>
  ...
</activity>

to set android:configChanges to orientation to change the orientation of our app.

And we set android:screenOrientation to portrait to keep the app in portrait mode.

To prevent rotation of screen with React Native, we can use the orientation field in your app.json file if our app is built with Expo.

For example, we write

{
  "expo": {
    "name": "My app",
    "slug": "my-app",
    "sdkVersion": "21.0.0",
    "privacy": "public",
    "orientation": "portrait"
  }
}

to set the orientation to portrait.

To add a progress bar slider with React Native, we add the Slide component.

To use it, we write

import React, { Component } from 'react';

import { defaultString } from '../String/defaultStringValue';
import {
  View,
  Text,
  StyleSheet,
  Image,
  Slider,
  TouchableOpacity,
} from 'react-native';

function pad(n, width, z = 0) {
  n = n + '';
  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}

const minutesAndSeconds = (position) => ([
  pad(Math.floor(position / 60), 2),
  pad(position % 60, 2),
]);

const SeekBar = ({
  trackLength,
  currentPosition,
  onSeek,
  onSlidingStart,
}) => {
  const elapsed = minutesAndSeconds(currentPosition);
  const remaining = minutesAndSeconds(trackLength - currentPosition);
  return (
    <View style={styles.container}>
      <View style={{ flexDirection: 'row' }}>
        <Text style={[styles.text, { color: defaultString.darkColor }]}>
          {elapsed[0] + ":" + elapsed[1]}
        </Text>
        <View style={{ flex: 1 }} />
        <Text style={[styles.text, { width: 40, color: defaultString.darkColor }]}>
          {trackLength > 1 && "-" + remaining[0] + ":" + remaining[1]}
        </Text>
      </View>
      <Slider
        maximumValue={Math.max(trackLength, 1, currentPosition + 1)}
        onSlidingStart={onSlidingStart}
        onSlidingComplete={onSeek}
        value={currentPosition}
        minimumTrackTintColor={defaultString.darkColor}
        maximumTrackTintColor={defaultString.lightGrayColor}
        thumbStyle={styles.thumb}
        trackStyle={styles.track}
      />
    </View>
  );
};

export default SeekBar;

const styles = StyleSheet.create({
  slider: {
    marginTop: -12,
  },
  container: {
    paddingLeft: 16,
    paddingRight: 16,
    paddingTop: 16,
  },
  track: {
    height: 2,
    borderRadius: 1,
  },
  thumb: {
    width: 10,
    height: 10,
    borderRadius: 5,
    backgroundColor: defaultString.darkColor,
  },
  text: {
    color: 'rgba(255, 255, 255, 0.72)',
    fontSize: 12,
    textAlign: 'center',
  }
});

to add the Slider component into our view.

We set the maximumValue of the slide.

And we set various functions for the onSlidingStart and onSlidingComplete event handlers.

We also set the track color with minimumTrackTintColor and maximumTrackTintColor.