Text Component Inside a Form Input

Question

My goal is to have a a component inside a input. These are my options that I am passing to the form from import t from 'tcomb-form-native';

commentFormOptions = {
  fields: {
    comment: {
      label: 'What do you think?',
      placeholder: 'Type your reply',
      stylesheet: InputStylesheet,
      returnKeyType: 'done',
      onSubmitEditing: () => {
        this.postComment();
      },
    },
  },
}

Here you can see where the view is:

<View style={styles.container}>
  <KeyboardAvoidingView
    style={styles.commentForm}
    <Form
      ref={ref => this.form = ref}
      type={CommentModel}
      options={this.commentFormOptions} />
  />
    <TouchableHighlight>
      <Text style={{ padding: 10, fontSize: 42 }}>Post</Text>
    </TouchableHighlight>
  </KeyboardAvoidingView>
</View>

I'm not sure I entirely understand why I cant go inside the and pass in the TouchableHighlight, and Text inside

What am I missing and how can I do this?

Edit

You can see here: https://snack.expo.io/HJrXcUtaM but Im trying to get that Post text on the right side of the input, so I can have a onPress to submit it. However; I cannot get the text in the input for some reason.

Answer 1

You would need to override the default Textbox component with your custom Comment component. See https://snack.expo.io/ByA_EdYTG.

If you need the Post button to be wrapped within the TextInput border, You need to create and style your own TextInput (put border around the whole container containing the TextInput and TouchableHighlight).

const { Form, Textbox } = t.form;

const Comment = props => (
  <View
    style={{
      flexDirection: 'row',
      alignItems: 'center',
    }}>
    <Textbox {...props} />
    <TouchableHighlight style={styles.postButton} onPress={props.onPress}>
      <Text style={{ padding: 10, fontSize: 20 }}>Post</Text>
    </TouchableHighlight>
  </View>
);

export default class App extends Component {
  static navigationOptions = {
    title: 'Comments',
  };

  commentFormOptions = {
    fields: {
      comment: {
        label: 'What do you think?',
        placeholder: 'Type your reply',
        returnKeyType: 'done',
        factory: props => (
          <Comment {...props} onPress={() => console.log('pressed')} />
        ),
        stylesheet: {
          ...Form.stylesheet,
          textbox: {
            ...Form.stylesheet.textbox,
            normal: {
              ...Form.stylesheet.textbox.normal,
              width: Dimensions.get('window').width - 70,
            },
          },
        },
      },
    },
  };