title: TextInput laggy because of my onscreen keyboard
body: <p>I'm working on an app that has its own keyboard onscreen(don't ask me why, I think its a terrible idea), but every time I type a new letter, it has a one sec delay, I don't know if its rerendering because I'm new to react native, but can someone help me out?</p>
  <p>The screen itself:</p>
  <pre><code>const [name, setName] = useState('');
  
  &lt;View style={styles.screen}&gt;
    &lt;View style={styles.container}&gt;
      &lt;Animated.View&gt;
        &lt;Text size={25} color=&quot;gray3&quot;&gt;Your full name&lt;/Text&gt;
      &lt;/Animated.View&gt;
  
      &lt;TextInput value={name} onChangeText={(text) =&gt; setName(text)} style={styles.name}&gt;&lt;/TextInput&gt;
  
      &lt;TextKeyboard state={(e) =&gt; setName(e)} delete={() =&gt; setName('')}&gt;&lt;/TextKeyboard&gt;
  
    &lt;/View&gt;
  &lt;/View&gt;
  
  </code></pre>
  <p>The TextKeyboard component</p>
  <pre><code>
  &lt;View style={styles.container}&gt;
          &lt;View style={styles.line}&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('Q')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'Q'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('W')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'W'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('E')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'E'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('R')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'R'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('T')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'T'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('Y')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'Y'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('U')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'U'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('I')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'I'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('O')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'O'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('P')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'P'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
          &lt;/View&gt;
          &lt;View style={styles.line}&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('A')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'A'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('S')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'S'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('D')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'D'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('F')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'F'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('G')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'G'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('H')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'H'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('J')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'J'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('K')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'K'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('L')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'L'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('Ç')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'Ç'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
          &lt;/View&gt;
          &lt;View style={styles.line}&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('Z')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'Z'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('X')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'X'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('C')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'C'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('V')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'V'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('B')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'B'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('N')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'N'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state('M')} style={styles.btn}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;{'M'}&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.delete()} style={[styles.btn, styles.btnDelete]}&gt;&lt;CustomText color=&quot;white&quot; size={35}&gt;DELETE&lt;/CustomText&gt;&lt;/TouchableOpacity&gt;
          &lt;/View&gt;
          &lt;View style={styles.line}&gt;
              &lt;TouchableOpacity onPress={() =&gt; props.state(' ')} style={[styles.btn, styles.btnSpace]}&gt;&lt;/TouchableOpacity&gt;
          &lt;/View&gt;
        &lt;/View&gt;
  
  </code></pre>
  <p>I know I'm doing something wrong, I just don't know what...</p>