Custom Rendering

Custom Tag Rendering

const CustomTag = ({ tag, onDelete }) => (
  <TouchableOpacity 
    style={styles.customTag}
    onPress={() => console.log('Tag pressed:', tag)}
  >
    <Text style={styles.tagEmoji}>✨</Text>
    <Text style={styles.tagText}>{tag}</Text>
    <TouchableOpacity 
      style={styles.deleteButton} 
      onPress={onDelete}
    >
      <Text style={styles.deleteText}>×</Text>
    </TouchableOpacity>
  </TouchableOpacity>
);

<TagInput
  tags={tags}
  updateState={updateState}
  renderTag={(tag, index, onDelete) => (
    <CustomTag tag={tag} onDelete={onDelete} />
  )}
/>

Custom Delete Button

const CustomDeleteButton = (onDelete, tag) => (
  <TouchableOpacity 
    style={styles.deleteBtn}
    onPress={onDelete}
  >
    <Text style={styles.deleteIcon}>🗑️</Text>
  </TouchableOpacity>
);

<TagInput
  tags={tags}
  updateState={updateState}
  renderDeleteButton={CustomDeleteButton}
/>

Custom Input Rendering

const CustomInput = ({ value, onChangeText, ...props }) => (
  <TextInput
    {...props}
    value={value}
    onChangeText={onChangeText}
    style={styles.customInput}
    placeholderTextColor="#999"
  />
);

<TagInput
  tags={tags}
  updateState={updateState}
  renderInput={(inputProps) => (
    <CustomInput {...inputProps} />
  )}
/>

Custom Container

const CustomContainer = ({ children }) => (
  <View style={styles.customContainer}>
    <Text style={styles.label}>Custom Tags Input</Text>
    {children}
    <Text style={styles.helper}>
      Press space or comma to add a tag
    </Text>
  </View>
);

<TagInput
  tags={tags}
  updateState={updateState}
  renderContainer={(children) => (
    <CustomContainer>{children}</CustomContainer>
  )}
/>

Styling Examples

const styles = StyleSheet.create({
  customTag: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#007AFF',
    borderRadius: 20,
    paddingVertical: 8,
    paddingHorizontal: 12,
    margin: 4,
  },
  tagEmoji: {
    fontSize: 14,
    marginRight: 6,
  },
  tagText: {
    color: '#FFFFFF',
    fontSize: 14,
    fontWeight: '600',
  },
  deleteButton: {
    marginLeft: 8,
    padding: 4,
  },
  deleteText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: 'bold',
  },
  customInput: {
    height: 40,
    borderColor: '#E0E0E0',
    borderWidth: 1,
    borderRadius: 8,
    paddingHorizontal: 12,
    fontSize: 16,
  },
  customContainer: {
    backgroundColor: '#F5F5F5',
    padding: 16,
    borderRadius: 12,
  },
  label: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 8,
  },
  helper: {
    fontSize: 12,
    color: '#666',
    marginTop: 8,
  },
});