CODEWITHSUNDEEP
javascriptreact-native
Undefined
Undefined

Reputation: 764

React Native - Show keyboard and render its values without using an input

Is there a way to use a keyboard only without any text input and get its values onChange?

I would like to show the keyboard only on button click event and render its typing values in a view without any input.

What would be a correct way of implementing this?

Upvotes: 2

Views: 2124

Answers (1)

Mehran Khan
Mehran Khan

Reputation: 3636

You can add a dummy TextInput and onPress button set focus on TextInput to show keyboard . Save state with "onChangeText" prop and show in a View

Complete Code

import React from "react";
import { View, Text, Button, TextInput } from "react-native";

export default class App extends React.Component {
  state = { text: "" };

  render() {
    return (
      <View style={{ flex: 1, marginTop: 50 }}>
        <TextInput
          style={{ height: 0, width: 0, borderWidth: 0 }}
          onChangeText={text => this.setState({ text })}
          ref={ref => {
            this.textInput = ref;
          }}
          autoCapitalize="none"
          autoCorrect={false}
          autoFocus={false}
        />
        <Button
          onPress={() => {
            this.textInput.focus();
          }}
          title="Press Me To show Keyboard"
          color="#841584"
        />
        <View
          style={{
            borderColor: "red",
            borderWidth: 1,
            padding: 16,
            marginTop: 20
          }}
        >
          <Text style={{ marginBottom: 8 }}>Show Typing Values:</Text>
          <Text>{this.state.text}</Text>
        </View>
      </View>
    );
  }
}

App Preview

enter image description here

Upvotes: 7

Related Questions