Add text on image in ReactNative

chansuke — Thu, 12 Jul 2018 05:20:45 +0000

If you want to put a simple text(like status or category) on an image, using ImageBackground is very useful.

<ImageBackground
  source={{ uri: hoge }}
  style={{
    height: 100,
    width: 100,
    position: 'relative', // because it's parent
    top: 2,
    left: 2
  }}
>
  <Text
    style={{
      fontWeight: 'bold',
      color: 'white',
      position: 'absolute', // child
      bottom: 0, // position where you want
      left: 0
    }}
  >
    Hello World
  </Text>
</ImageBackground>

Put the component as a child of <ImageBackground> and tweak the position as you want.

TextInput component for ReactNative ^0.54.2

chansuke — Thu, 28 Jun 2018 06:49:04 +0000

From v0.54.2, a behavior of TextInput has changed a bit.If you use onChangeText with value or 'defaultValue', Japanese(and any other non-alphabetic text) text input is not available by default.
If you want to input the non-alphabetic text, value(or defaultValue) is need to be treated as props.So create an another TextInput component to catch the props value is the one of the solution.

Create the component.

import React, { Component } from 'react';
import { Platform, TextInput } from 'react-native';

class CustomTextInput extends Component {
  shouldComponentUpdate(nextProps) {
    return Platform.OS !== 'ios' || this.props.value === nextProps.value;
  }
  render() {
    return <TextInput {...this.props} />;
  }
}

export default CustomTextInput;

And send the value as props

<CustomInputForm
  style={{
    height: 40,
    borderColor: 'gray',
    borderRadius: 5,
    borderWidth: 1,
    backgroundColor: 'white',
    margin: 5
  }}
  onChangeText={value => this.setState({ value })}
  value={this.state.value}
  placeholder="Enter your name"
  placeholderTextColor="gray"
/>

DEV Community: chansuke

Add text on image in ReactNative

TextInput component for ReactNative ^0.54.2