npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

softchatjs-react-native

v4.2.35

Published

React native UI SDK for softchatjs-core. Create a free account at: https://www.softchatjs.com

Downloads

300

Readme

softchatjs-react-native

React native UI SDK for softchatjs-core. Create a free account at: https://www.softchatjs.com

Installation

npm install softchatjs-core softchatjs-react-native

Install the peer dependecies

npm install expo-av expo-camera expo-file-system expo-image expo-image-picker @shopify/flash-list expo-video

Usage

import React, { useEffect } from 'react';
import { ChatProvider, Conversations } from "softchatjs-react-native";
import ChatClient from "softchatjs-core"

const client = ChatClient.getInstance({ subId: 'xxxx', projectId: 'xxxx' });

var chatUser = {
    uid: '1234',
    username: 'abc-123',
    firstname: "John",
    lastname: "Doe",
    profileUrl: "",
    custom: { "anything": "anything" },
}

function App() {

    const [ currentConversation, setCurrentConversation ] = useState(null)

    useEffect(() => {
        if (client) {
            client.initializeUser(chatUser);
        }
    }, [client]);

  return (
    <ChatProvider
        client={client}
    >
        {currentConversation? (
            <Chat
                activeConversation={currentConversation}
            />
        ):(
            <Conversations
                user={chatUser}
                onOpen={({ activeConversation }) => {
                    setCurrentConversation(activeConversation)
                }}
            />
        )}
        
    </ChatProvider>
  );
}

export default App;

Guide

<Conversations /> Component API

Props

| Parameter | Type | Default | Description | | :-------- | :------- | :-------| :----------------| | user | UserMeta | | Required. chat user | | onOpen | Function | | Required. Function that returns the selected conversation | | renderItem | Function | |Render a custom conversation item | | renderHeader | Function | | Render a custom conversation header | | renderPlaceHolder | Function | | Render a custom placeholder | | users | UserMeta[] | | list of users a conversation can be initiated with | | store | ConversationListMeta | | Locally stored conversation map |

<Chat /> Component API

Props

| Parameter | Type | Default | Description | | :-------- | :------- | :-------| :----------------| | activeConversation | ConversationListItem | | Required. Selected conversation | | renderChatBubble | Function | | Render a custom chat item | | renderHeader | Function | | Render chat header | | placeholder | JSX.Element | | Render placeholder | | renderHeader | Function | | Render custom chat input | | keyboardOffset | number | | Value passed to adjust how the keyboard adjusts the input field when it's open |

<BroadcastLists /> Component API

Props

| Parameter | Type | Default | Description | | :-------- | :------- | :-------| :----------------| | client | ChatClient | | Required. Selected conversation | | onOpen | Function | | Required Function that returns the selected broadcast list | | renderItem | Function | | Render a custom broadacast list item |

Customizing the UI


var fontFamily = "Giest"

var darkModeTheme: ReactTheme = {
  background: {
    primary: "#1b1d21", // White for the primary background
    secondary: "#202326", // Light grey for secondary background
    disabled: "#E0E0E0", // Very light grey for disabled background
  },
  text: {
    primary: "white", // Black text for high contrast
    secondary: "#4A4A4A", // Dark grey for secondary text
    disabled: "#9E9E9E", // Light grey for disabled text
  },
  action: {
    primary: "#007AFF", // Bright blue for primary action buttons
    secondary: "#5AA3FF", // Light blue for secondary action buttons
  },
  chatBubble: {
    left: {
      bgColor: "#343434", // Light grey for incoming message background
      messageColor: "white", // Dark grey for incoming message text
      messageTimeColor: "#6D6D6D", // Medium grey for message time
      replyBorderColor: "#D1D1D6", // Slightly darker grey for reply border
    },
    right: {
      bgColor: "#343434", // Light blue for outgoing message background
      messageColor: "white", // Black for outgoing message text
      messageTimeColor: "#6D6D6D", // Medium grey for message time
      replyBorderColor: "#A3D1FF", // Medium blue for reply border
    },
  },
  icon: "white", // Dark grey for icons
  divider: "rgba(128, 128, 128, 0.136)", // Light grey for dividers
  hideDivider: false,
  input: {
    bgColor: "#1b1d21", // Light grey for input background
    textColor: "white", // Black for input text
    emojiPickerTheme: "dark", // Light theme for emoji picker
  },
};

<ChatProvider
    client={client}
    theme={darkModeTheme}
    fontFamily={fontFamily}
>
    {children}
</ChatProvider>