forum.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,TextInput,
  TouchableOpacity
} from 'react-native';
import Timeline from 'react-native-timeline-flatlist'
import Icon from 'react-native-vector-icons/FontAwesome'

export default class Example extends Component {
  constructor(){
    super()
    this.onEventPress = this.onEventPress.bind(this)
    this.renderSelected = this.renderSelected.bind(this)
    this.renderDetail = this.renderDetail.bind(this)

    this.data = [
      {
        time: '09:00', 
        title: 'Rivo Lalaina', 
        description: "Mba misy afak manome hevitre momban'ny camping car ve?" ,
        lineColor:'#009688', 
        icon: require('./assets/icon.png'),
        imageUrl: 'https://cloud.githubusercontent.com/assets/21040043/24240340/c0f96b3a-0fe3-11e7-8964-fe66e4d9be7a.jpg'
      },
      {
        time: '10:45', 
        title: 'Abdoul Whalhab', 
        description: 'C genre de plaisir est mal appréci  à Madagascar', 
        icon: require('./assets/icon.png'),
        imageUrl: 'https://cloud.githubusercontent.com/assets/21040043/24240405/0ba41234-0fe4-11e7-919b-c3f88ced349c.jpg'
      },
      {
        time: '12:00', 
        title: 'Lunch', 
        icon:   require('./assets/icon.png'),
      },
      {
        time: '14:00', 
        title: 'Miora Tiana', 
        description: 'Mba manasa anareo izahay azafady mba efa nahita n parc eny Ambohimlaza.',
        lineColor:'#009688', 
        icon: require('./assets/icon.png'),
        imageUrl: 'https://cloud.githubusercontent.com/assets/21040043/24240419/1f553dee-0fe4-11e7-8638-6025682232b1.jpg'
      },
      {
        time: '16:30', 
        title: 'Tax', 
        description: 'Madagascar est la plus belle ville du monde.', 
        icon:require('./assets/icon.png'),
        imageUrl: {source:require('./assets/icon.png')}
      },
      {
        time: '16:30', 
        title: 'Mendrika', 
        description: 'De resy hono barea omaly hariva.', 
        icon:require('./assets/icon.png'),
        imageUrl: {source:require('./assets/icon.png')}
      },
      {
        time: '16:30', 
        title: 'Arleme Schreck', 
        description: 'Ce monde se tue à petit feu.', 
        icon:require('./assets/icon.png'),
        imageUrl: {source:require('./assets/icon.png')},  
      }

    ]
    this.state = {selected: null}
  } 
  onEventPress(data){
    this.setState({selected: data})
  }
  renderSelected(){
      if(this.state.selected)
        return <Text style={{marginTop:10}}>Selected event: {this.state.selected.title} at {this.state.selected.time}</Text>
  }
  renderDetail(rowData, sectionID, rowID) {
    let title = <Text style={[styles.title]}>{rowData.title}</Text>
    var desc = null
    if(rowData.description && rowData.imageUrl)
      desc = (
        <View style={styles.descriptionContainer}>   
          <Image source={{uri: rowData.imageUrl}} style={styles.image}/>
          <Text style={[styles.textDescription]}>{rowData.description}</Text>
        </View>
      )
    return (
      <View style={{flex:1}}>
        {title}
        {desc}
      </View>
    )
  }
  render() {
    return (
      <View style={styles.container}>
        {this.renderSelected()}
        <Timeline 
          style={styles.list}
          data={this.data}
          circleSize={20}
          circleColor='rgba(0,0,0,0)'
          lineColor='rgb(45,156,219)'
          timeContainerStyle={{minWidth:52, marginTop: -5}}
          timeStyle={{textAlign: 'center', backgroundColor:'#ff9797', color:'white', padding:5, borderRadius:13}}
          descriptionStyle={{color:'gray'}}
          options={{
            style:{paddingTop:5}
          }}
          innerCircle={'icon'}
          onEventPress={this.onEventPress}
          renderDetail={this.renderDetail}          
          separator={false}
          detailContainerStyle={{marginBottom: 20, paddingLeft: 5, paddingRight: 5, backgroundColor: "#BBDAFF", borderRadius: 10}}
          columnFormat='single-column-right'
        />
          <TextInput  
              style={styles.input}
              placeholder={'Envoyer un message.'}
              secureTextEntry={this.state.showPass}
              placeholderTextColor={'rgba(255,255,255,0.7'}
              underlineColorAndroid =  'transparent'
          />
          <TouchableOpacity style={styles.btnEye} >
              <Icon name= 'paper-plane' style={styles.envoie}size={35} color={"#4ffff"}/>
          </TouchableOpacity>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 12,
	  paddingTop:40,
    backgroundColor:'white',
    alignContent:'center',
    textAlign:'left'
  },
  list: {
    flex: 1,
    marginTop:20, 
  },
  title:{
    fontSize:16,
    fontWeight: 'bold'
  },
  descriptionContainer:{
    flexDirection: 'row',
    paddingRight: 50
  },
  image:{
    width: 50,
    height: 50,
    borderRadius: 25
  },
  textDescription: {
    marginLeft: 10,
    color: 'gray',
  },
  input :{
    width:350,
    height :45,
    color:'#55547',   
    borderRadius:25,
    marginHorizontal :25,
    position:'relative',
    color: 'black',
    alignSelf:'right',
    textAlign:'center'
  },
  envoie :{
    position :'absolute',
    bottom:6,
    right:600

  },
});