Skip to content
Xeno

Getting Started

Xeno is a full-featured component for rental platforms, providing an integrated image selection, moderation, and form-filling experience. This guide will help you get started with a new project or add Xeno to your existing React Native app.

Quick Start

Create a New Project

If you don’t have a React Native project yet, you can create one using Expo. Run the following command in your terminal:

Terminal window
npx create-expo-app@latest

Add Xeno To Your Project

Inside your project directory, install the Xeno package and its dependencies:

Terminal window
npm install @yelishgiri1/xeno

Note: Xeno automatically installs its dependencies, including:

@react-native-picker/picker axios expo-document-picker expo-file-system

However, for easier troubleshooting, you may also choose to install these dependencies individually:

Terminal window
npm install @react-native-picker/picker axios expo-document-picker expo-file-system

This will add the necessary files and configurations for Xeno to work in your project.

See It in Action

You can try Xeno in your project by adding the component to your app. Here’s a simple setup:

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import Xeno from '@yelishgiri1/xeno/src/Xeno.js'; // Importing from src


export default function App() {
  const [isXenoVisible, setXenoVisible] = useState(false);


  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Open Rent Form" onPress={() => setXenoVisible(true)} />
      <Xeno
        visible={isXenoVisible}
        onClose={() => setXenoVisible(false)}
      />
    </View>
  );
}

Start the Development Server

When working locally, start Expo’s development server to preview your work. Inside your project directory, run the following command:

Terminal window
npm start

This will open a local development server, allowing you to see your app in action on a connected device or emulator.

Add Content

Xeno is ready for you to start adding rental item data through its form fields, including image uploads and moderation. Customize the fields or styling as needed!

Next Steps

Configure: Learn about common options and customize your form fields in Xeno.js.

Navigate: Integrate Xeno with your app’s navigation system to provide an intuitive user experience.

Style: Discover built-in styling options or wrap Xeno in a custom component to apply additional styles.

Deploy: Publish your app using Expo’s deployment options.

Updating Xeno

Xeno is actively maintained. To update it and its dependencies, run:

Terminal window
npm update @yelishgiri1/xeno