The text is displayed in blocks and cannot be viewed after running for a period of time in APP.

[srrrgggg]

Environment

OS: Windows 7
Node: 8.1.3
Yarn: Not Found
npm: 5.0.3
Watchman: Not Found
Xcode: N/A
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.4 => 0.55.4

Normal Case

Error Case

[react-native-bot]

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] under Environment to let us know.

[srrrgggg]

Environment
OS: Windows 7
Node: 8.1.3
Yarn: Not Found
npm: 5.0.3
Watchman: Not Found
Xcode: N/A
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.4 => 0.55.4

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.57 and verify if the issue still exists.

The ":rewind:Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

[hramos]

Can you share an example of the code you're using to render these?

[srrrgggg]

Code：
import React from 'react'
import {
StyleSheet,
Text,
View,
Image,
TouchableHighlight,
NetInfo,
DeviceEventEmitter
} from 'react-native';
import { withNavigation } from 'react-navigation';
// import { NavigationActions } from 'react-navigation';
import { f, getMachineInfo, updateUniqueCode } from '../../utils/f'
class Head extends React.Component {
constructor(props) {
super(props);
this.state = {
time: '',
date: '',
welcomeText: '萌医生',
isConnected: false
}
this._newWorkHandle = this._newWorkHandle.bind(this)
}
_getWelcomeText() {
getMachineInfo().then(machineInfo => {
if (machineInfo.WELCOME_TEXT) {
this.setState({
welcomeText: machineInfo.WELCOME_TEXT
})
}
})
}
componentWillMount() {
this._getWelcomeText()
this.didFocus = this.props.navigation.addListener('didFocus', payload => {
this.setState(this.getTime)
this.timer = setInterval( => {
this.setState(this._getTime)
}, 1000 * 30)

        NetInfo.isConnected.fetch().done((isConnected) => {
            this.setState({
                isConnected
            })
        });
        NetInfo.addEventListener('connectionChange', this._newWorkHandle);
    })
    this.didBlur = this.props.navigation.addListener('willBlur', _ => {
        this.timer && clearInterval(this.timer);
        NetInfo.removeEventListener('connectionChange', this._newWorkHandle);
    })

    this.IMEmitter = DeviceEventEmitter.addListener('imMsg', msg => {
        if (msg) {
            try {
                let result = JSON.parse(msg.data);
                if (+result.type === 8) {
                    updateUniqueCode()
                    this._getWelcomeText()
                }
            } catch (err) {
                alert('HEADER' + JSON.stringify(err))
            }
        }
    })
}
componentWillUnmount() {
    this.timer && clearInterval(this.timer);
    NetInfo.removeEventListener('connectionChange', this._newWorkHandle);
    this.IMEmitter && this.IMEmitter.remove()
}
_newWorkHandle(network) {
    let state = network == 'NONE' || network == 'UNKNOWN';
    this.setState({
        isConnected: !state
    })
}
_getTime() {
    let time = new Date();
    let year = time.getFullYear(),
        month = time.getMonth() + 1,
        day = time.getDate(),
        hours = time.getHours(),
        minutes = time.getMinutes();
    let add0 = val => val >= 10 ? val : `0${val}`;
    return {
        year: `${year}/${add0(month)}/${add0(day)}`,
        date: `${add0(hours)}:${add0(minutes)}`
    }
}
login() {
    if (['Home', 'PickResult'].includes(this.props.navigation.state.routeName)) {
        this.props.navigation.navigate('MachineLogin')
    }
    if (this.props.navigation.state.routeName === 'Pick') {
        this.props.navigation.replace('MachineLogin')
    }
}
render() {
    return (
        <View style={styles.container}>
            <View style={styles.left}>
                <Image
                    style={styles.logo}
                    resizeMode={'contain'}
                    source={require('../../images/logo.png')}
                />
                <Text style={styles.welcomeText}>{this.state.welcomeText}</Text>
            </View>
            <View style={styles.right}>
                <View>
                    <Text style={styles.time}>{this.state.date || ''}</Text>
                    <Text style={styles.year}>{this.state.year || ''}</Text>
                </View>
                <View style={styles.signal}>
                    {
                        this.state.isConnected ? 
                        <Image source={require('../../images/valid.png')} style={styles.signalImg}/> : 
                        <Image source={require('../../images/un-valid.png')} style={styles.signalImg}/>
                    }
                    
                </View>
                <TouchableHighlight 
                    underlayColor={'transparent'}
                    onPress={() => {this.login()}}>    
                    <Image
                        style={styles.set}
                        source={require('../../images/sz.png')}
                        resizeMode={'contain'}
                    />
                </TouchableHighlight>
            </View>
        </View>
    )
}

}
export default withNavigation(Head);
const styles = StyleSheet.create({
container: {
height: f(120),
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
logo: {
height: f(66), width: f(66)
},
set: {
width: f(60),
height: f(66)
},
left: {
flexDirection: 'row',
alignItems: 'center'
},
welcomeText: {
marginLeft: f(10),
fontSize: f(40),
color: '#fff',
fontWeight: 'bold'
},
right: {
height: f(66),
flexDirection: 'row',
alignItems: 'center'
},
signal: {
width: f(50),
height: f(40),
marginHorizontal: f(30)
},
signalImg: {
width: f(50),
height: f(40)
},
time: {
textAlign: 'right', fontSize: f(52), fontWeight: 'bold', color: '#fff'
},
year: {
textAlign: 'right', fontSize: f(28), color: '#fff', marginTop: f(-14),
}
})

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.