Posts

Showing posts with the label React Native

React Native Spring Boot: File Upload, List, Download, and Delete

Image
To create a Spring Boot and React Native application with functionalities for file upload, listing, downloading, and deleting, you can follow these steps: 1. Backend (Spring Boot) Step 1: Set Up Spring Boot Project You can use Spring Initializr ( https://start.spring.io/ ) to create a Spring Boot project with dependencies: Spring Web Spring Boot DevTools Step 2: Create File Storage Service First, you'll need a service that handles file storage. import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Service; import org.springframework.web.multipart.MultipartFile; import java.io. File ; import java.io.IOException; import java.nio. file .Files; import java.nio. file .Path; import java.nio. file .Paths; @Service public class FileStorageService { @Value( "${file.upload-dir}" ) private String uploadDir; public String storeFile(MultipartFile file ) throws IOException { Path path = Paths.get(uploadDir ...

React Native Spring Boot: Full-stack CRUD example

Image
Here's a full-stack CRUD example using React Native as the front-end and Spring Boot 3 as the back-end. This example covers the setup and integration to manage tasks in a simple to-do list application. 1. Spring Boot Back-End Add Dependencies to pom.xml <dependencies> <dependency> <groupId> org.springframework.boot </groupId> <artifactId> spring-boot-starter-web </artifactId> </dependency> <dependency> <groupId> org.springframework.boot </groupId> <artifactId> spring-boot-starter-data-jpa </artifactId> </dependency> <dependency> <groupId> com.h2database </groupId> <artifactId> h2 </artifactId> <scope> runtime </scope> </dependency> </dependencies> Configure H2 Database in application.properties spring .datasource .url =jdbc: h2 :mem:tasksdb spring .datasourc...

React Native DatePicker for Mobile Application - Example

Image
In this section, we will learn how to use DatePicker with  React native application.   User Interface: Implementation:   You must set up your local development environment. Follow the below link to set up your local environment. React Native - Environment Setup - Create a new project After executing the commands mentioned in this link, a folder with a specified name will generate with the following contents. Add react-native-datepicker-dialogue and moment library inside your project  npm i react-native-datepicker-dialog --save npm install --save moment react-moment  Next, we are going to edit the App.js file and write the below code.   App.js: import React, { Component } from 'react' ; import { AppRegistry, StyleSheet, Text, View, TouchableOpacity } from 'react-native' ; import { DatePickerDialog } from 'react-native-datepicker-dialog' import moment from 'moment' ; export default class App extends Component { ...