/r/reactnative
A community for learning and developing native mobile applications using React Native by Facebook.
A community for learning and developing native mobile applications using React Native by Facebook.
Interested in building web apps using React.js? Check out /r/reactjs!
Getting Started w/React Native
irc.freenode.net #reactnative
Keywords: ios, android, mobile, apps, apple, iphone, ipad
/r/reactnative
I built this app (https://akashq.com) within a few weeks, thanks to React Native. If you want to try it out, here is the invitation code: BVN55L
UI with a custom modal view, built with expo, react-native-reanimated, and gesture-handler.
Features 🎵 Full-screen music player modal with gesture controls 🔄 Smooth scaling animations of the root content 👆 Interactive pan gesture handling 📱 iOS-style sheet presentation 🎨 Dynamic border radius animations
Also supports drag horizontal to close, scrollview + pan gestures depending on position of scroll and more.
Still needs few fixes but below in comments is the GitHub repo, feel free to contribute.
Can someone tell me if I'm missing something with Refresh control? The function works perfectly fine, but I thought it was only supposed to activate when the ScrollView Y axis was 0?
Whenever I try to scroll up to the top of the page on any point of the y axis it will trigger the refresh. only then will I be able to scroll up whilst the refresh animation is mid process.
const [refreshing, setRefreshing] = useState(false);
const onRefresh = React.useCallback(() => {
setRefreshing(true);
setTimeout(() => {
setRefreshing(false);
}, 2000);
}, []);
<SafeAreaProvider>
<ScrollView contentContainerStyle={styles.scrollView}
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}>
</ScrollView>
<Text>Pull down to see RefreshControl indicator</Text>
</SafeAreaProvider>
Thanks
As a junior dev in this market which is easier to get a job?
Good morning, I am building a finance-related app and certain functionality should only be usable to users in specific jurisdictions (ie countries / states). I would prefer not having to request one more permission (Geolocation) and we don't need exact coordinates like Geolocation permissions / tracking give. How viable is it to just use a backend service that maps IP addresses to general location (ie country / state)? So the device would send an HTTP request to our server which would return a value (probably country code) and the device would should / hide functionality based on that value.
Does this sound like a good solution? Is it considered unethical to try to figure out a user's location from IP address without alerting them or requesting some sort of permission?
I want to know which is better for a beginner to read to learn react native, expo documentation or react native documentation? which has easier/better tutorials?
starting a new journey in react native mobile app development hope I'll finish it
Hello. In a previous post, there was a question about how to handle multiple different environments in React Native. I responded to that post where I generally described on how to handle multiple environments in Expo, but without EAS. Since a few people showed interest in my response, I decided to make a separate post and share the example repo where you can see how to exactly achieve that. Here's the link to the repo. The repo also describes how to release your app using Fastlane and Firebase App distribution.
I hope that this will be helpful to at least some of you.
Let me know what you think about it and if you have any feedback on what could be improved.
Hi i am currently using a windows machine and have a assignment to do where I have to implement Push Notifications but I am really confused as I do not have much knowledge about backend and can only use android simulator maximum resources are for ios is there any resource anyone can share it would be much of help
I am a beginner to mobile app development, planning to build a thrift store kinda app(like Karrot) in which users can search for what they need and find who has it. if yes, users can chat and make the deal.
App will be saving user's basic details like name, email, location and what they want to buy or sell.
I am thinking of Firebase, but can't choose between Cloud firestore or realtime database which do you think is more suitable for this app? more suggestions are welcome too.
What model should you use to train a face skin disease detection (acne and eczema) app ?
Hello.
I'm using https://github.com/gorhom/react-native-bottom-sheet and I'm trying to apply this effect but I can't get it. I have used expo blur, etc... but there is no way.
Any idea?
Ohkay, so starting out I am a React Web developer and that's my primary experience with the react ecosystem. It's been a month or so I tried out react native for mobile on android (couldn't try out ios builds because I don't own any apple products). I loved that you can build productivity or simple CRUD or pretty much any kind of app with smooth UI and small app packages for specific architectures ( most apps use 1Gig storage anyways nowadays ).
My question is, Is it worth exploring React Native Windows + Mac Os?
Are there any companies other than MS working on projects powered by React Native Windows + MacOs?
I heard MS Edge was built on top of React (not sure the how), is it still the case?
The getting started guide on their official page seems a bit complicated to me, is there anyone here who have experienced this project flow?
With the new architecture in place as default, hows the support for native/win Api proxies via C++ native modules?
Seems like they haven't gone the Chromium embedding route for view layer, how does the styling and rendering work in React Native Windows + MacOs ? Is it web compliant?
I am downloading the image first using rnfs and saving the image in the cache directory, then I am displaying the image in the ImageZoom component and get a blur image when zooming, although image is of hight quality . Please help
How can i solve my picker jest test, it says unable to find an element with text, <View>
<RNCPicker /> </View>and the test cannot go through it.
And this is the sample coding:
im stuck for too long
export interface Role {
ID: number;
Name: string;
Desc: string;
}
const ManageRolesScreen = () => {
const [role, setRole] = useState<Role[]>([]);
const [createRole, setCreateRole] = useState<Role>({
ID: 0,
Name: '',
Desc: '',
});
const [selectedRole, setSelectedRole] = useState<number>(0);
useEffect(() => {
const fetchRoles = async => {
try{const response = await axios.get<Role>(url);
setRole(response.data);}
catch(err){console.err;}
}fetchRoles();
}, [];
}
jest.mock('axios');
const mockAxios = axios as jest.Mocked<typeof axios>;
describe('Manage Role Screen', () => {
afterEach(() => {
jest.clearAllMocks();
});
it('Should appear all role in role picker', async () => {
//Mock API response to get role data
mockAxios.get.mockResolvedValueOnce({
data: [
{ID: 0, Name: 'admin', Desc: 'Admin Role'},
{ID: 1, Name: 'user', eDesc: 'User Role'},
],
});
const {getByText, findByText} = render(<ManageRolesScreen />);
await waitFor(() => {
expect(getByText('Select a role')).toBeTruthy();
});
expect(await findByText('admin')).toBeTruthy();
expect(await findByText('user')).toBeTruthy();
});
<Picker
selectedValue={selectedRole}
onValueChange={itemValue => setSelectedRole(itemValue as number)}
style={styles.picker}>
<Picker.Item label="Role" value="" />
{role.map(roles => (
<Picker.Item
key={roles.ID.toString()}
label={roles.RoleName}
value={roles.ID}
/>
))}
</Picker>
I’m having a lot of trouble getting this to work any insight would be appreciated 🙏 trying to get stripe connect to work
I'm having some real issues with React Native Expo audio and think i need to get some proper teaching from someone because something fundamental seems to be going wrong and i can't find any info online about it. In return i can offer music and production lessons or consultation. I've got a degree in Jazz Guitar, learnt piano since I was 6, studied composition+record engineering and produce in logic/ableton( but am at least a little familiar with most DAWs). Long shot I know but if anyone happens to be on the lookout for some of that stuff and can trade in react native knowledge I would really appreciate it! Thanks in advance all
Hello everyone!
Thank you in advance for any help.
I’m aware there are some libraries to help you view PDFs inside of a native app, but can you use those libraries in a scroll view instead of full screen?
For example, imagine I have the top half of the screen occupied by a PDF that you can scroll down on (kind of like how it works when you view them horizontally on your device), and the second half of the screen I have other content (quizzes, commentary, etc )
Is this achievable? Is there a library that suits itself to this use case?
Thank you!
How is everyone handling differents env releases?
Let’s say I need to get a staging version to QA. Can TestFlight handle differents envs?
Thanks
Hi Everyone ,
I would like to ask about how to embedded ReactJS web component into React Native WebView component
for example ,
I have code of ReactJS web page (not hosted only as local source code) that includes packages such as material UI and other packages , also apis , so I want to display this page into my React Native App . how can I implement that? also is the WebView component has the ability to make communication between ReactJS components and React Native component ?
Hello everyone,
I'm currently working with a modal in a React Native Expo project and have implemented the following setup for currency selection:
<Modal
accessible={true}
accessibilityLabel="Currency Selection"
accessibilityViewIsModal={true}
statusBarTranslucent
isVisible={isVisible}
onBackdropPress={onClose}
style={styles.modal}
>
<SafeAreaView
accessible={true}
accessibilityLabel="Currency Selection Safeview"
className={`${themeMode === 'dark' ? 'bg-[#171717]' : 'bg-white'}`} style={styles.modalContent}>
<Text
accessible={true}
accessibilityLabel="Currency Selection Title"
className={`text-sm ${themeMode === 'dark' ? 'text-[#f6f8fa]' : 'text-black'} mt-20 text-xl font-bold text-center`}
>
Currency Selection
</Text>
</SafeAreaView>
However, the Accessibility Scanner is showing an error labeled "Item Label." Has anyone else encountered this issue, or might have insights on how to address it?
Thank you in advance for any suggestions!
i am looking for a good react native course?
Quickglow is a tool built using the Tamagui design system that lets people get lip product recommendations such as lipstick by simply uploading a picture of selfie and get matched based on their skin tone.
The dashboard has two main features: image and chat. The image feature saves your recommendations and lets you scroll through them. The chat feature is a question/answer that's inspired by Claude and ChatGPT.
There is a credits system now where you can buy different amounts of credits weekly. The credits renew automatically for you once you are subscribed to the service.
Just thought this was super interesting as it. What do you think of this product?
Hello, fellow developers!
I’m a web and mobile developer using Expo for mobile development, currently working on Linux. Recently, I’ve been experiencing issues with my laptop that have started to impact my productivity. Given these challenges, I’m considering switching to a MacBook for a more stable workflow.
For those with experience using MacBooks in a similar setup, I’d love to hear your insights. Specifically, which MacBook models would you recommend for development on a budget? I’m looking for a balance of performance and value that would suit my work needs.
Also, if you’ve made the switch yourself, how has it impacted your productivity?
I’ve got a relatively simple React Native app, but its size feels way too big for what it does. I’m using around 4–5 RN libraries, but they seem to add up fast.
Anyone have tips to drastically reduce app size? Looking for advice on optimizing libraries, assets, or any tools to help track down what's eating up space.
This type of header is called a Top App Bar in the Material You design system. I'd like to implement it without using any design libraries, such as React Native Paper.