import { View , Text } from 'native-base' ; import React from 'react' ; import { StyleSheet } from 'react-native' ; import { Message } from '../../types/redux' ; import { getPerRandomColor } from '../../utils/getRandomColor' ; type Props = { message : Message ; } ; function SystemMessage ( { message } ) { const { content , from } = message ; return ( < View style = { styles . container } > < Text style = { [ styles . text , { color : getPerRandomColor ( from . originUsername as string ) } ] } > { from . originUsername } & nbsp ; < /Text> < Text style = { styles . text } > { content } < /Text> < /View>); } export default SystemMessage ; const styles = StyleSheet . create ( { container : { flexDirection : 'row' , alignItems : 'center' , } , text : { fontSize : 14 , } , } ) ;