State of React Native Survey 2023

Sate of React Native Survey 2023 is an initiative from the developers working in Software Mansion. They took the survey from 2391 audience from 4th of December 2023 to 8th of January 2024.

The goal of the State of React Native 2023 survey is to provide you with a resource for comparing different aspects of React Native development to help you make better technical decisions. The survey can be used as a resource to find alternatives in different categories of application development. Keep in mind that these types of results should always be taken with a grain of salt, as it's impossible to capture the state of the entire ecosystem. 

To Read more about the survey. Please visit stateofreactnative.com

Display Decimal KeyPad in React Native IOS Apps

In React Native Apps, We will display the HTML form for user's to input the details. By default, text keypads respective to native device will get displayed when user focus on  TextInput field. In order to display the numeric keypad in React Native, We need to pass 'numeric' value for keyboardType Prop.

Here is the basic Implementation.

import React from 'react';
import {SafeAreaView, StyleSheet, TextInput} from 'react-native';

const TextInputExample = () => {
  const [text, onChangeText] = React.useState('Useless Text');
  const [number, onChangeNumber] = React.useState('');

  return (
    <SafeAreaView>
     <TextInput
        style={styles.input}
        onChangeText={onChangeNumber}
        value={number}
        placeholder="useless placeholder"
        keyboardType="numeric"
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default TextInputExample;

Above implementation will display the numeric keypad on IOS App. 

It doesn't include dot character. To include dot character, we need to pass 'decimalpad' as the value for keyboardType Prop

<TextInput

        style={styles.input}

        onChangeText={onChangeNumber}

        value={number}

        placeholder="useless placeholder"

        keyboardType="decimalpad"

      />