I am using react-native-image-zoom-viewer for zooming of images when images are clicked in a carousal. The image zoom functionality works fine when the app is running in debug mode. But when i am trying to test this same functionality in release mode, it's not working as expectation.
I am passing props for initial view of the image as 300*300 (height*width), that runs fine on debug mode. But in release mode, the same doesn't work and i think new image size becomes 800*800 but i am never passing any-kind of values like that.
I have already tried by passing proper props as suggested by library as per its document. Did some alterations too. But nothing seems working on debug mode
const imageList = [];
for (let i=0; i<images.length; i++){
imageList.push({url:images[i].uri,width:300,height:300});
}
return(
<ImageViewerLib
imageUrls={imageList}
renderIndicator={()=>{}}
loadingRender={()=><Loader isLoader = { true } style = {{height:100,with:100}} />}
renderArrowLeft={()=>
<View style={{padding: 10}} >
<Icon
type = { 'Ionicons' }
name = { 'arrow-round-back' }
/>
</View>
}
renderArrowRight={()=>
<View style={{padding: 10}}>
<Icon
type = { 'Ionicons' }
name = { 'arrow-round-forward' }
/>
</View>
}
backgroundColor="white"
index={imageIndex}
saveToLocalByLongPress={false}
enablePreload={true}
flipThreshold={50}
maxOverflow={300}
/>
);
As you can see in the above code that i am passing fixed image width and height which works smoothly in debug mode.
But when in release mode, this size doesn't work. Initial rendered image is much lager that above provided dimension.
Related
I want to limit TextInput to full number and the value must be less than 50. I'm leveraging OnChangeText event to intercept the input value and filter it accordingly. It kind of works but the issue is, it briefly displays the text before erasing it. This is an excerpt of my code -
const [userInputValue, setuserInputValue] = useState('');
let onChangeTextInput = (value) => {
const numericRegex = /^([0-9])+$/
if(numericRegex.test(value) && Number(value) <= 50) {
setuserInputValue(value)
}
}
return (
<TextInput
placeholder='Type full number less than 50'
onChangeText={newValue => onChangeTextInput(newValue)}
value={ userInputValue }
textAlign='center'
keyboardType='numeric'
style={{
width: 250,
marginVertical: 10
}}
/>
When I searched online, I found this issue was reported as bug for react-native 0.54.3 and supposedly fixed in 0.57.1 (Bug Report). I'm on 0.70.5. I'm wondering if there's any work around for this problem.
System - iOS
React-native - 0.70.5
Using "react-native-pager-view": "^6.1.2" package in ReactNative.
I have the same bug as here.
https://github.com/callstack/react-native-pager-view/issues/503
I'm trying PagerView with the code pasted below, but when I swipe to move the page, e.nativeEvent.position is different from the actual page index.
import PagerView, { PagerViewOnPageScrollEvent, PagerViewOnPageSelectedEvent } from 'react-native-pager-view';
import Modal from 'react-native-modal';
const onPageScroll = useCallback((e: PagerViewOnPageScrollEvent) => onPageScrollPagerView(e, setCurrentTabIndex), []);
const onPageScrollPagerView = (
e: PagerViewOnPageScrollEvent,
setCurrentTabIndex: React.Dispatch<React.SetStateAction<number>>,
) => {
console.log(`onPageScroll position = ${e.nativeEvent.position}`);
setCurrentTabIndex(e.nativeEvent.position);
};
return (
<Modal isVisible={isVisible}>
<SafeAreaView>
<View>
<PagerView ref={viewPager} initialPage={0} onPageScroll={onPageScroll} onPageSelected={onPageSelected}>
{list.map((item) => (
<View key={item.id}>
{item.content}
</View>
))}
</PagerView>
</View>
</SafeAreaView>
</Modal>
);
This is the result obtained when scrolling to the first page.
onPageScroll is called twice, and for some reason the wrong position is returned the second time.
And 0 is set to setCurrentTabIndex.
onPageScroll position = 1
onPageScroll position = 0
Is there any way to resolve this?
It may be related to what you write in <Modal></Modal> of 'react-native-modal'.
As also written here, this problem does not occur on iPhone11, but on iPhone12 and newer devices.
I didn't use 'react-native-modal', I used fullscreen modal.
screenOptions={{ presentation: 'modal' }}
I am trying to incorporate this WYSIWYG package into my react native project (0.64.3). I built my project with a managed workflow via Expo (~44.0.0).
The problem I am noticing is that the editor will sometimes render with the text from my database and sometimes render without it.
Here is a snippet of the function that retrieves the information from firebase.
const [note, setNote] = useState("");
const getNote = () => {
const myDoc = doc(db,"/users/" + user.uid + "/Destinations/Trip-" + trip.tripID + '/itinerary/' + date);
getDoc(myDoc)
.then(data => {
setNote(data.data()[date]);
}).catch();
}
The above code and the editor component are nested within a large function
export default function ItineraryScreen({route}) {
// functions
return (
<RichEditor
onChange={newText => {
setNote(newText)
}}
scrollEnabled={false}
ref={text}
initialFocus={false}
placeholder={'What are you planning to do this day?'}
initialContentHTML={note}
/>
)
}
Here is what it should look like with the text rendered (screenshot of simulator):
But this is what I get most of the time (screenshot from physical device):
My assumption is that there is a very slight delay between when the data for the text editor is actually available vs. when the editor is being rendered. I believe my simulator renders correctly because it is able to process the getNote() function faster.
what I have tried is using a setTimeOut function to the display of the parent View but it does not address the issue.
What do you recommend?
I believe I have solved the issue. I needed to parse the response better before assigning a value to note and only show the editor and toolbar once a value was established.
Before firebase gets queried, I assigned a null value to note
const [note, setNote] = useState(null);
Below, I will always assign value to note regardless of the outcome.
if(data.data() !== undefined){
setNote(data.data()[date]);
} else {
setNote("");
}
The last step was to only show the editor once note no longer had a null value.
{
note !== null &&
<RichToolbar
style={{backgroundColor:"white", width:"114%", flex:1, position:"absolute", left:0, zIndex:4, bottom: (toolbarVisible) ? keyboardHeight * 1.11 : 0 , marginBottom:-40, display: toolbarVisible ? "flex" : "none"}}
editor={text}
actions={[ actions.undo, actions.setBold, actions.setItalic, actions.setUnderline,actions.insertLink, actions.insertBulletsList, actions.insertOrderedList, actions.keyboard ]}
iconMap={{ [actions.heading1]: ({tintColor}) => (<Text style={[{color: tintColor}]}>H1</Text>), }}
/>
<RichEditor
disabled={disableEditor}
initialFocus={false}
onChange={ descriptionText => { setNote(descriptionText) }}
scrollEnabled={true}
ref={text}
placeholder={'What are you planning to do?'}
initialContentHTML={note}
/>
}
It is working properly.
I uploaded images to firebase storage and fetching it on the display. It's working fine, but I noticed that it reloads every time changing to other page and the speed is quite slow.
So, after googling I found expo-fast-image (because I'm using expo)
https://www.npmjs.com/package/expo-fast-image
so, after installing it, I'm trying to follow or copy the given an example, but I don't know how to use it properly. Below is my code with expo-fast-image.
Does anyone know how to use it properly?
import ExpoFastImage from 'expo-fast-image';
const CustomListItem = ({id, number, data, coffeeBean, description, image, Order}) => {
const user = auth.currentUser;
const name = user.displayName;
const ImageLoad = (image, id) => (
<View>
<ExpoFastImage
uri= {image}
CacheKey={`cache.${id}`}
/>
</View>
)
return (
<ListItem key={id} bottomDivider onPress={() => {Order({id, number, coffeeBean, description, image})}} >
<ExpoFastImage image={image, id}/>
<Avatar rounded source={{CacheKey: `cache.${id}`}} />
<ListItem.Content >
<ListItem.Title style={{ fontWeight: '800'}}>{id}</ListItem.Title>
<ListItem.Subtitle numberOfLines={1} ellipsizeMode='tail'>
Stock: {number}
</ListItem.Subtitle>
</ListItem.Content>
</ListItem>
)
}
export default CustomListItem
If expo-fast-image uses Image from react-native, images are cached and they are downloaded again only when the url changes. So in your situation, you might be giving different urls to the component which propmts it to download again. Make sure the url is always the same. Even if you add some random string like #some-random-value at the end of url which does nothing. It triggers the download action.
react-native:0.43.3
The problem only occurs in Android system, iOS is fine.
When I touch a TouchableOpacity component, the onTouch function won't be executed.
Anyone found this problem?
I built a Calendar with RN. The problem is that when I click the Day unit on Android devices or emulators I'll get the error undefined is not and object (evaluating '_props[registrationName]'). But it's okay to click it on iOS devices and emulators. The Day component' code is like this:
<TouchableOpacity style={styles.calendarRowUnit} onPress={() => this.props.onSelect(this.props.date)}>
<View style={dateWrapperStyle}>
<Text style={dateTextStyle}>{dateString}</Text>
</View>
</TouchableOpacity>
And the error image:
error info iamge
I've found that only when I touch the Text area the error will occur.
I don't know it's a react-native bug or my fault. The error never occured before I updated the react-native version to 0.43.3.
/**
* #param {object} inst The instance, which is the source of events.
* #param {string} registrationName Name of listener (e.g. `onClick`).
* #return {?function} The stored callback.
*/
getListener: function(inst, registrationName) {
var listener;
// TODO: shouldPreventMouseEvent is DOM-specific and definitely should not
// live here; needs to be moved to a better place soon
if (typeof inst.tag === 'number') {
const props = EventPluginUtils.getFiberCurrentPropsFromNode(
inst.stateNode
);
if (!props) {
// Work in progress.
return null;
}
listener = props[registrationName];
if (shouldPreventMouseEvent(registrationName, inst.type, props)) {
return null;
}
} else {
if (typeof inst._currentElement === 'string') {
// Text node, let it bubble through.
return null;
}
if (!inst._rootNodeID) {
// If the instance is already unmounted, we have no listeners.
return null;
}
const props = inst._currentElement.props;
listener = props[registrationName];
if (shouldPreventMouseEvent(registrationName, inst._currentElement.type, props)) {
return null;
}
}
invariant(
!listener || typeof listener === 'function',
'Expected %s listener to be a function, instead got type %s',
registrationName,
typeof listener
);
return listener;
},
There's currently a bug where if the Text inside the TouchableOpacity has a number it will error out. The way to fix it for the moment is to cast the number to a string and it will trigger the String check and throw a null appropriately.
EX:
Before: <Text>16</Text>
After: <Text>String(16)</Text>
There is a bug in #12905 <Text /> This bug is specific to RN 0.43.x and has been fixed in later versions. The bug was , Whenever there is a number inside <Text /> then it will cause this error.
The fix for this is :
Upgrade React Native with latest versions.
TypeCast the value to string.
For Example,
<Text> {100} </Text> to <Text> {''100} </Text>
<Text> {100} </Text> to <Text> {String(100)} </Text>
<Text> {100} </Text> to <Text> {(100).toString} </Text>