@@ -4,7 +4,7 @@ import type {
44 OnChangeStateEvent ,
55} from 'react-native-enriched-html' ;
66import { useRef , useState } from 'react' ;
7- import { View , Button , StyleSheet } from 'react-native' ;
7+ import { View , StyleSheet , Pressable , Text } from 'react-native' ;
88
99export default function App ( ) {
1010 const ref = useRef < EnrichedTextInputInstance > ( null ) ;
@@ -16,13 +16,15 @@ export default function App() {
1616 ref = { ref }
1717 style = { styles . input }
1818 placeholder = "Type something here..."
19- onChangeState = { ( e ) => setState ( e . nativeEvent ) }
20- />
21- < Button
22- title = { state ?. bold . isActive ? 'Unbold' : 'Bold' }
23- color = { state ?. bold . isActive ? 'green' : 'gray' }
24- onPress = { ( ) => ref . current ?. toggleBold ( ) }
19+ onChangeState = { e => setState ( e . nativeEvent ) }
2520 />
21+ < Pressable
22+ style = { [ styles . button , state ?. bold . isActive && styles . buttonActive ] }
23+ onPress = { ( ) => ref . current ?. toggleBold ( ) } >
24+ < Text style = { [ styles . text , state ?. bold . isActive && styles . textActive ] } >
25+ Bold
26+ </ Text >
27+ </ Pressable >
2628 </ View >
2729 ) ;
2830}
@@ -31,8 +33,29 @@ const styles = StyleSheet.create({
3133 container : { gap : 12 } ,
3234 input : {
3335 fontSize : 18 ,
36+ color : '#232736' ,
3437 padding : 12 ,
38+ borderRadius : 12 ,
3539 minHeight : 96 ,
36- backgroundColor : 'gainsboro' ,
40+ backgroundColor : '#eef0ff' ,
41+ } ,
42+ button : {
43+ alignSelf : 'center' ,
44+ width : 100 ,
45+ padding : 8 ,
46+ borderRadius : 24 ,
47+ borderWidth : 1 ,
48+ borderColor : '#919fcf' ,
49+ } ,
50+ buttonActive : {
51+ borderColor : '#57b495' ,
52+ backgroundColor : '#57b495' ,
53+ } ,
54+ text : {
55+ textAlign : 'center' ,
56+ color : '#919fcf' ,
57+ } ,
58+ textActive : {
59+ color : '#eef0ff' ,
3760 } ,
3861} ) ;
0 commit comments