آموزش ساخت برنامه موبایل Uber با استفاده از React Native
303, SeeOther
https://youtu.be/bvn_HYpix6s icon

Use Tailwind CSS with RN for awesome styling!

Use the Google Distance Matrix API to calculate Travel time and Distance (+ Cost!)

Use the Directions Google API for real navigation!

Use Google places API for real navigations!

Use apple & google maps for iOS & Android 

Use React Native Navigation to navigate between screens!

Use React Native Elements to elevate your app design! 

آموزش ساخت برنامه موبایل Uber با استفاده از React Native
یک گرید ساده با قابلیت راست به چپ و پیجینگ در ری اکت
200, OK
https://www.npmjs.com/package/react-angrid icon
در این مقاله قصد دارم شمارو را با امکانات لایبرری "ری اکت انگرید " برای ری اکت جی اس آشنا کنم. این لایبرری شامل یک کامپوننت گرید با قابلیت‌های زیر هست:

1-ساپورت راست به چپ
2- نمایش پیجینگ
3-  نمایش لودر
4- امکان تغییر کلمات
5- امکان جاگذاری کامپوننت در هر سل

نحوه استفاده از این کامپوننت به این شکل هست:

1- تعریف ستونها:
const columns = [
    {
      field: "fullname",
      headerName: "First & last Name",
      description: "name of user",
      width: 50,
    },
    {
      field: "age",
      headerName: "Age",
      description: "age of user",
      width: 50,
      renderCell:(info)=><strong>Age is : {info.data.age}</strong>
    }
]

2- تعریف استیت‌های لازم برا ست کردن سطر ها، لودر، تعداد کل, شماره صفحه و بزرگی هر صفحه(دقت شود که امکان استفاده بدون پیجینگ هم وجود دارد و امکانات کامل را در لینک لایبرری میتوانید مطالعه نمایید) 
...
const [rows,setRows] = useState([]);
const [loading,setLoading] = useState(false);
const [totalCount,setTotalCount] = useState(0);
const [filter,setFilter] = useState({ pageSize:10, pageNumber:1 });
const _fetchData = async () => { if (!active) return; //mock api, you can call your api then set data to table like commented line below return new Promise((resolve) => { setLoading(true); setTimeout(() => { setRows(data);// SetRows, note that data comes from api and must be array of objects setTotalCount(7);//=== set total page size for pagination part resolve(); setLoading(false); }, 2000); }); }
3- در نهایت کامپوننت مورد نظر:
import Angrid from "rect-angrid";
...
_handlePageChange = (newPage)=>{
    setFilter(p=>({...p,pageNumber:newPage}))
}
...
      <AnGrid
        loading={loading}
        columns={columns}
        rows={rows}
        showRowNumber={true}
        pageSize={filter.pageSize}
        pageNumber={filter.pageNumber}
        totalCount={totalCount}
        onPageChange={_handlePageChange}
        theme="dark"
        minHeight={300}
        emptyList={<strong>There Is No Info</strong>}
      />
نمایی از گرید:



یک گرید ساده با قابلیت راست به چپ و پیجینگ در ری اکت
تقویم Datepicker متن‌باز شمسی برای React
200, OK
https://mmehdinasiri.github.io/react-calendar-datetime-picker/ icon
Supports Gregorian and Jalali calender
Uses context api to share data
Supports three types of calender: single day - date range - multiple dates
Fully customizable
Supports maximum and minimum dates
Capability to add a list of disabled dates
Supports time for single and range type
Capability to mark weekends
Function called for change, open and close events
Supports Typescript

تقویم Datepicker متن‌باز شمسی برای React