Reagire alla versione originale manca una lettera - android, reactjs, react-native

Ho visto un tutorial su React Native su YouTube.

Ho creato una semplice app stopper. (Android) Il problema è che nella build di rilascio manca una delle lettere. Ho provato a creare un'altra semplice app con solo "Hello" e nella versione di build nel mio telefono invece di mostrare "Hello" ottengo "Hell".

Immagini:

Sviluppo sviluppato usando Nexus 6 (AVD):

Rilascio build con LG G4 (fisico):

Non so perché questo accada. Apprezzo ogni consiglio e aiuto.

Modifica: index.android.js:

import React, { Component } from "react"
import {
AppRegistry,
StyleSheet,
View,
Text,
TouchableHighlight
} from "react-native"

class flexbox extends Component {
render() {
return (
<View style={styles.container}>
<View style={[styles.header]}>
<View style={[styles.timeWrapper]}>
<Text style={styles.timer}>00:00.00</Text>
</View>
<View style={[styles.buttonWrapper]}>
<TouchableHighlight onPress={() => console.log("Start")} underlayColor="#2ecc71" style={[styles.button, styles.startButton]}>
<Text>Start</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => console.log("Lap")} underlayColor="#1abc9c" style={[styles.button, styles.lapButton]}>
<Text>Lap</Text>
</TouchableHighlight>
</View>
</View>
<View style={[styles.footer]}>
<Text>Laps</Text>
</View>
</View>
)
}
}

const styles = StyleSheet.create({
container: {
flex: 1
},
header: {
flex: 1
},
footer: {
flex: 1
},
timeWrapper: {
flex: 5,
justifyContent: "center",
alignItems: "center"
},
buttonWrapper: {
flex: 3,
flexDirection: "row",
justifyContent: "space-around",
alignItems: "center"
},
timer: {
fontSize: 60,
color: "black"
},
button: {
borderWidth: 2,
height: 100,
width: 100,
borderRadius: 50,
justifyContent: "center",
alignItems: "center"
},
startButton: {
borderColor: "#2ecc71"
},
lapButton: {
borderColor: "#1abc9c"
}
})

AppRegistry.registerComponent("flexbox", () => flexbox)

risposte:

Non hai fornito alcun codice, ma suppongo che tu abbia creato una vista con larghezza e altezza esatte e, per avere il testo al centro, hai aggiunto il riempimento.

Ecco un esempio di un circolo di lavoro con testo:

import React, { Component } from "react";
import { Text, View, StyleSheet } from "react-native";
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.circle}>
<Text>Hello</Text>
</View>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#ecf0f1",
},
circle: {
width: 50,
height: 50,
borderRadius: 25,
justifyContent: "center",
alignItems: "center",
borderColor: "red",
borderWidth: 3,
}
});

O vedi esempio in schizzo