We Keep Coding

How to use inlineImageLeft in an Expo React Native project

So I was going through the React Native docs on <TextInput />
I saw a property called 'inlineImageLeft' and it seemed to add an icon on the left side of the <TextInput />.
But in the docs, its specified that the icon should be stored in /android/app/src/main/res/drawable
But I am using an Expo generated project. Is it possible to use this property on Expo?
Here is the example I tried from the react-native docs but it didn't work:
<TextInput
placeholder={`Search for ${currentMode}`}
style={styles.input}
value={searchState.search}
onChangeText={handleChange}
placeholderTextColor='white'
autoCorrect={false}
inlineImageLeft='search_icon' // Does not work
/>

If you are using the managed workflow (which it sounds like you are) then it is not possible to use inlineImageLeft. Even if you were in the bare workflow, this only works for Android.
You will have to build your own component that renders an icon/image inside the text input. Something like this: How can I put an icon inside a TextInput in React Native?

resizable prop no longer working in react-big-calendar

I was building a scheduling app with react-big-calendar and I have noticed from React v17 onwards the resizable does not work because of the way react handles event changing.
this is the issue: https://github.com/jquense/react-big-calendar/issues/1785
I have seen in the comments that someone fixed this issue and made a pull request: https://github.com/jquense/react-big-calendar/pull/1857
My problem is that it is still not working, the resizable handles does not show up on the big calendar. I made sure I am using the latest version 0.33.6 and also tried to figure out where the user did the changes to events to fix the issue so that I can modify the package, but I noticed they both are completely different files, I wasn't able to find the event handlers in my node_modules/react-big-calendar so that I can make edits. So how do I fix this error? I cannot revert back to reactv16 because I must use v17 in my project.
Thanks in Advance! :)
Here's what my calendar looks like:
<DragAndDropCalendar
selectable
resizable
onEventDrop={onEventDrop}
onEventResize={resizeEvent}
localizer={localizer}
events={events}
onSelectSlot={handleSelect}
defaultView="week"
defaultDate={new Date()}
timeslots={2}
step={15}
popup
tooltipAccessor={(e) => e.title}
/>
</div>

React Native custom cross-platform dropdown select element

I have searched quite thoroughly with not much luck. I am having trouble implementing a simple custom dropdown select element for my application.
I am hoping for a cross-platform (iOS & Android) solution like the simple custom JS dropdown featured here https://www.w3schools.com/howto/howto_custom_select.asp
Is this something I should just be creating myself with react native views and some state? I'm still trying to get a feel of what solutions are unrealistic. Could anyone give me an example from a professional project?
I am trying to avoid using the native Picker from here since I cannot style them to match my designer's needs. https://github.com/react-native-community/react-native-picker
I tried this package but it seems to be having trouble with the latest versions and I need something reliable. https://github.com/sohobloo/react-native-modal-dropdown
I was also looking at this package as it seems to be nearly perfect for my needs but again it has not been updated in 2 years https://github.com/n4kz/react-native-material-dropdown

My recommendation would be to go with something out there, as I will generally make implementation quicker for you, although as you say there might be a trade off in styling.
I've recently been in the situation a few times where I've really had to look hard for good, maintained components for React Native, but they certainly exist.
I've been successfully using react-native-paper recently. You could consider their accordion drop down list but may not suit in styling as it follows material UI guidelines.
https://callstack.github.io/react-native-paper/

I used this in my project and it works perfectly:
https://github.com/mrlaessig/react-native-autocomplete-input
you can just use the onFocus prop to make it dropdown with a click instead of when the user firsts typing and onEndEditing prop to hide it when the user selects an option.
here's my full implementation for reference, I had to go into the code a bit to check for these props since the documentation didn't include it.
<Autocomplete
data={filterNames()}
placeholder={'Who are you here to see?'}
onChangeText={item => setTextAndShowResults(item)}
onFocus={() => setHideResults(false)}
onEndEditing={() => setHideResults(true)}
defaultValue={getDefaultValue()}
keyExtractor={(item, i) => {
return item.id;
}}
returnKeyType={'next'}
listStyle={styles.listStyle}
inputContainerStyle={styles.borderWidth0}
style={styles.autoCompleteButtonStyle}
hideResults={hideResults}
renderItem={({ item, i }) => (
<TouchableOpacity onPress={() => setTextAndHideResults(item)}>
<Text style={styles.listTextStyle}>{item.name}</Text>
</TouchableOpacity>
)}
/>

How to play a gif using ImageBackground in react-native?

I have a GIF background image that I am rendering using react-native's ImageBackground component. The only issue is that the gif is not running, it becomes static.
When I use the Image component everything works fine, but I need to use the ImageBackground component
<ImageBackground
source= {require('../../assets/img/initial_wallpaper.gif')}
style={{flex:1}} >
</ImageBackground>
Using the code above the GIF renders statically. When I use the online expo util to test this it works fine there with the exact same code. But when I implement this in my react-native code base it does not work. Any insight will be greatly appreciated. Thank you :)

I found this question on the same topic. From that, I'd guess you're running on Android? The following should help you resolve your problem:
Edit your android/app/build.gradle file and add the following code:
dependencies: {
...
compile 'com.facebook.fresco:fresco:1.+'
// For animated GIF support
compile 'com.facebook.fresco:animated-gif:1.+'
// For WebP support, including animated WebP
compile 'com.facebook.fresco:animated-webp:1.+'
compile 'com.facebook.fresco:webpsupport:1.+'
}
then you need to bundle the app again, You can display the gif images
in two ways like this.
1-> <Image
source={require('./../images/load.gif')}
style={{width: 100, height: 100 }}
/>
2-> <Image
source={{uri: 'http://www.clicktorelease.com/code/gif/1.gif'}}
style={{width: 100, height:100 }}
/>

GIF and WebP support on Android
When building your own native code, GIF and WebP are not supported by
default on Android.
You will need to add some optional modules in
android/app/build.gradle, depending on the needs of your app.
dependencies {
// If your app supports Android versions before Ice Cream Sandwich (API level 14)
implementation 'com.facebook.fresco:animated-base-support:1.10.0'
// For animated GIF support
implementation 'com.facebook.fresco:animated-gif:1.12.0'
// For WebP support, including animated WebP
implementation 'com.facebook.fresco:animated-webp:1.10.0'
implementation 'com.facebook.fresco:webpsupport:1.10.0'
// For WebP support, without animations
implementation 'com.facebook.fresco:webpsupport:1.10.0'
}

for others like me looking for the solution in RN Version 0.60 try adding below inside app build.gradle file
implementation 'com.facebook.fresco:animated-gif:1.12.0' //instead of
implementation 'com.facebook.fresco:animated-gif:2.0.0' //use

KeyboardType - React Native

Have you any ideas concerning a KeyboardType for research. I searched and I didn't find any information about that.
In example, in Android, replace the button "Ok" by an icon or another text. Hope there is a KeyboardType specified for research. I don't really want to custom the Keyboard, I think it's not really so easy...
It need to work on IOS and Android

I you are using a TextInput component, you can try the props returnKeyType and keyboardType. They both customize the keyboard layout and works on android and iOS.