react-native-scrollable-input

React Native Scrollable TextInput

A cross-platform TextInput component for React Native. This is a JavaScript-only implementation of React-Native TextInput.

Features

• Fix the problem of scrolling RTL TextInput in a ScrollView Component for Android & iOS (Specially Android)

Installation

$ npm install react-native-scrollable-input --save

Quick Start

This example make a large scrollable content list for testing InputText when it put in the ScrollView (You can dragging on InputText's for moving content of ScrollView top and down).

import React from 'react';
import { View, ScrollView, StyleSheet } from 'react-native';
import InputText from 'react-native-scrollable-input';

export default class Example extends React.Component
{
    state = {
        text: '',
        tempList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    }
    
    render ()
    {
        return (
            <View style={styles.container}>
                <ScrollView>
                    {this.state.tempList.map ((item, index) =>
                    {
                        return (
                            <InputText
                                value={this.state.text}
                                onChangeText={(value) => this.setState ({text: value})}
                                style={styles.input}
                                containerStyle={styles.inputContainer}
                                placeholder='اینجا بنویسید ...'
                                // All React-Native Original TextInput Props is Supported.
                            />
                        );
                    })}
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create ({
  container: {
    flex: 1,
  },
  input: {
    // Your custom text fontFamily, color and etc ...
  },
  inputContainer: {
    // Custom style for Container of InputText
  }
});