search

Eugnis / react-native-timeline-flatlist

FlatList based timeline component for React Native for iOS and Android
https://www.npmjs.com/package/react-native-timeline-flatlist
MIT License
478 stars 69 forks source link

icons with svg #7

Open tibztibz opened 4 years ago

tibztibz commented 4 years ago

hello ! it would be very cool if we could implement the possibility to add svg icon in the timeline :)

Thanks !

Bye bye

Eugnis commented 4 years ago

Hi. You can pass any React element as icon. For example, for svg you can use react-native-svg-icon package and pass element as icon prop.

tibztibz commented 4 years ago

okey :) thx for the advice :)

JB712 commented 1 year ago

I'm struggling with passing an icon to the timeline. I did used FontAwesomeIcon (from '@fortawesome/react-native-fontawesome') and Icon (from 'react-native-vector-icons/FontAwesome') and it didn't worked, neither as data icon prop or Timeline iconDefault prop.

Here are the two icons objects I tried with: import {faTrash} from '@fortawesome/free-solid-svg-icons'; import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'; const reactImage = (<FontAwesomeIcon icon={faTrash} />); //then put icon: reactImage in one of the object of my data list or import Icon from 'react-native-vector-icons/FontAwesome'; const reactImage = ( <Icon onPress={() => { nav.pushPage(componentId, 'NetworkDisplay'); }} reverse raised color={colors.red} solid size={30} name="wifi" type="font-awesome" /> ); They can be displayed next to the Timeline but not as icons. I'm working with : react: 17.0.2, react-native: 0.68.5, react-native-timeline-flatlist: 0.8.0.

EDIT: I tried with require('a_local_file') or with icon: <Image style={{width: 20, height: 20}} source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}} /> as in the exemple provided and it doesn't work.

MY BAD, I did forgot the innerCircle={'icon'} 😅