FontSize Selector and Color Selector

[hectorgp100]

I have a project where i need to edit this 2 elements... so i created a solution with modals, if anyone need it, feel free to tell me and i will post the complete code.

[hectorgp100]

also i wondering why still using the <font element... is not supported by html5

[ddikodroid]

post it please

[hectorgp100]

post it please

First you need to add this 2 functions to get the modals work:

  fontSize = (size) => {
    // 1=  10px, 2 = 13px, 3 = 16px, 4 = 18px, 5 = 24px, 6 = 32px, 7 = 48px;
    richText.current?.setFontSize(size);
  };

  fontColor = (color) => {
    richText.current?.setForeColor(color)
  };

Then you need to create the modals:

<Modal
      animationType="fade"
      transparent={true}
      visible={fontSizeSelector}
    >
      <View style={{
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        flex: 1
      }}>
        <View style={{
          backgroundColor: Colors.white,
          borderRadius: 5,
          marginTop: screen.height / 3.5,
          width: screen.width / 2,
          height: 200,
          alignSelf: 'center'
        }}>
          <Pressable onPress={() => setFontSizeSelector(false)} style={{ marginTop: 10, marginRight: 15, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center' }}>
            <Image resizeMode='contain' source={require('../../assets/img/closeIcon.png')} style={{ width: 25, height: 25, marginBottom: 10 }} />
          </Pressable>

          <ScrollView style={{ alignSelf: 'center' }}>
            <Pressable onPress={() => fontSize(1)}><Text style={styles.fontSizeItem}>10px</Text></Pressable>
            <Pressable onPress={() => fontSize(2)}><Text style={styles.fontSizeItem}>13px</Text></Pressable>
            <Pressable onPress={() => fontSize(3)}><Text style={styles.fontSizeItem}>16px</Text></Pressable>
            <Pressable onPress={() => fontSize(4)}><Text style={styles.fontSizeItem}>18px</Text></Pressable>
            <Pressable onPress={() => fontSize(5)}><Text style={styles.fontSizeItem}>24px</Text></Pressable>
            <Pressable onPress={() => fontSize(6)}><Text style={styles.fontSizeItem}>32px</Text></Pressable>
            <Pressable onPress={() => fontSize(7)}><Text style={styles.fontSizeItem}>48px</Text></Pressable>
          </ScrollView>
        </View>
      </View>
    </Modal>

    <Modal
      animationType="fade"
      transparent={true}
      visible={fontColorSelector}
    >
      <View style={{
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        flex: 1
      }}>
        <View style={{
          backgroundColor: Colors.white,
          borderRadius: 5,
          marginTop: screen.height / 3.5,
          width: screen.width / 2,
          height: 200,
          alignSelf: 'center'
        }}>
          <Pressable onPress={() => setFontColorSelector(false)} style={{ marginTop: 10, marginRight: 15, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center' }}>
            <Image resizeMode='contain' source={require('../../assets/img/closeIcon.png')} style={{ width: 25, height: 25, marginBottom: 10 }} />
          </Pressable>

          <ScrollView style={{ alignSelf: 'center' }} >
            <Pressable onPress={() => fontColor('C0C0C0')}><Text style={{...styles.fontColorItem, backgroundColor: '#C0C0C0'}}>Gris</Text></Pressable>
            <Pressable onPress={() => fontColor('FFFFFF')}><Text style={{...styles.fontColorItem, backgroundColor: '#FFFFFF', color: 'black'}}>Blanco</Text></Pressable>
            <Pressable onPress={() => fontColor('808080')}><Text style={{...styles.fontColorItem, backgroundColor: '#808080'}}>Gris Oscuro</Text></Pressable>
            <Pressable onPress={() => fontColor('000000')}><Text style={{...styles.fontColorItem, backgroundColor: '#000000'}}>Negro</Text></Pressable>
            <Pressable onPress={() => fontColor('FF0000')}><Text style={{...styles.fontColorItem, backgroundColor: '#FF0000'}}>Rojo</Text></Pressable>
            <Pressable onPress={() => fontColor('800000')}><Text style={{...styles.fontColorItem, backgroundColor: '#800000'}}>Marron</Text></Pressable>
            <Pressable onPress={() => fontColor('FFFF00')}><Text style={{...styles.fontColorItem, backgroundColor: '#FFFF00', color: 'black'}}>Amarillo</Text></Pressable>
            <Pressable onPress={() => fontColor('808000')}><Text style={{...styles.fontColorItem, backgroundColor: '#808000'}}>Olivo</Text></Pressable>
            <Pressable onPress={() => fontColor('00FF00')}><Text style={{...styles.fontColorItem, backgroundColor: '#00FF00', color: 'black'}}>Lima</Text></Pressable>
            <Pressable onPress={() => fontColor('008000')}><Text style={{...styles.fontColorItem, backgroundColor: '#008000'}}>Verde</Text></Pressable>
            <Pressable onPress={() => fontColor('00FFFF')}><Text style={{...styles.fontColorItem, backgroundColor: '#00FFFF', color: 'black'}}>Aqua</Text></Pressable>
            <Pressable onPress={() => fontColor('008080')}><Text style={{...styles.fontColorItem, backgroundColor: '#008080'}}>Verde Azulado</Text></Pressable>
            <Pressable onPress={() => fontColor('0000FF')}><Text style={{...styles.fontColorItem, backgroundColor: '#0000FF'}}>Azul</Text></Pressable>
            <Pressable onPress={() => fontColor('000080')}><Text style={{...styles.fontColorItem, backgroundColor: '#000080'}}>Azul Marino</Text></Pressable>
            <Pressable onPress={() => fontColor('FF00FF')}><Text style={{...styles.fontColorItem, backgroundColor: '#FF00FF'}}>Rosa</Text></Pressable>
            <Pressable onPress={() => fontColor('800080')}><Text style={{...styles.fontColorItem, backgroundColor: '#800080'}}>Morado</Text></Pressable>
          </ScrollView>
        </View>
      </View>
    </Modal>

This is not the best solution, but it's a fast one... 😆

[ddikodroid]

actually you can add onPress props on Text component

[hectorgp100]

actually you can add onPress props on Text component

Yes.. my bad 🤦‍♂️