1

I'm new to React native. As you can see in the photo, there is 1 text input and 1 box showing the typed text. My font size is 14. I want my font size to be reduced when the text I write to the input takes up too much space on the board. So I don't want any text left out of the box. I want the text to shrink automatically when the text is ready to go out of the box. How can i do that?

enter image description here

My codes:

import React, { useState } from 'react'
import { Text, View, TextInput, StyleSheet } from 'react-native'



const Test = () => {

    const [text, setText] = useState('')

    return (
        <View style={styles.container}>
            <View style={styles.board}>
                <Text style={styles.text}>
                    {text}
                </Text>
            </View>
            <View style={styles.input}>
                <TextInput
                    onChangeText={setText}
                />
            </View>
        </View>
    )
}

export default Test

const styles = StyleSheet.create({
    container:{ 
        backgroundColor: 'purple', 
        flex: 1, 
        justifyContent: 'center', 
        alignItems: 'center' 
    },
    board:{
        height: 50, 
        width: 100, 
        backgroundColor: 'grey', 
        marginBottom: 20
    },
    input:{
        height: 50, 
        width: 100, 
        backgroundColor: 'white' 
    },
    text:{
        fontSize:14
    }
})
SoF
  • 729
  • 1
  • 10
  • 24
  • You probably can make it into an if in your styles as such : text:{ fontSize: text.length < 15 ? 14 : 10 } in which case it sees if the length of your text is less than 15 chars it will make the font 14 and if it is more make it 10. You can play with it and make it a switch or an extensive if or even make it a equation. – Hypothesis Oct 10 '21 at 14:54

1 Answers1

2

you can use this approach - https://snack.expo.dev/IFjJfnj6y , for getting size of current text you can also use this link - React-native view auto width by text inside

Quintis
  • 517
  • 3
  • 12