react-native
View a PDF in React Native
Okay, for future generations, here’s how I solved this problem: Updated September 13, 2017: There is a new NPM module that makes this entire process much easier. I would suggest using it going forward instead of my original answer below: react-native-pdf Once installed, rendering the PDF is as easy as this: export default class YourClass … Read more
Platform specific import component in react native with typescript
One way of doing it, which is a bit annoying, is creating a declaration file with the same name. component – component.d.ts <— – component.android.tsx – component.ios.tsx then import { file } from “../group/file”; Update: Another way of doing it is just omit the extension for one of them, then typescript will pick up the … Read more
How to set the style attribution to fill the rest space?
You can try this; <View style={{flex:1,backgroundColor:’white’}}> <View style={{justifyContent:’space-around’}}> <View style={{height:50,alignSelf:’stretch’,backgroundColor:’pink’,margin:5}}/> <View style={{height:50,alignSelf:’stretch’,backgroundColor:’pink’,marginHorizontal:5}}/> <View style={{height:50,alignSelf:’stretch’,backgroundColor:’pink’,margin:5}}/> </View> <View style={{flex:1,alignItems:’center’,justifyContent:’center’,alignSelf:’stretch’,backgroundColor:’blue’,margin:5}}> <Text style={{color:’white’,fontWeight:’bold’}}> View </Text> </View> </View>
React native debugger is too slow
Check the clocks on your phone and your computer. In my case, the lagging occurs when the phone’s clock is behind the computer’s clock for more than a second. The issue resolved when I changed the phone’s clock to a few seconds ahead of the computer.
How to add/Delete item into ListView?
Yes, call cloneWithRows(…) The React Native documentation doesn’t cover the ListViewDataSource object, so it can be helpful to read the comments in the source code to see how this works. Some notes which may be helpful: cloneWithRows(data) is a bit misleadingly named because doesn’t just create a clone of the data as the name suggests. … Read more
How to do an Horizontal ListView, or FlatList in react-native
The answer is to add the horizontal property set to true. Yeah now it’s described in the doc: https://reactnative.dev/docs/flatlist#horizontal So obviously a FlatList is a Child of a ScrollView so he got the Horizontal Bool. <FlatList horizontal={true} data={DATA} renderItem={renderItem} keyExtractor={(item) => item.id} extraData={selectedId} /> Ciao